webpack -2

webpack 같은경우에는 parcel 보다 공부할 내용이 좀더 많아서 파트를 나눠서 진행하기로 했음!!

 

module

---

이번에는 프로젝트에 스타일을 적용하겠다.

 

보통같은 경우에는 index.html 에서 link 태그를 통해서 css 파일을 연결해주는데 

webpack 은 bundel 을통해서 dist 폴더안에 집어넣어서 사용하기 때문에 dist 폴더안에 css  파일을 찾을수 있는 구조만 되면 문제가 없을 것이다.

 

우선 첫번째 static 폴더안에 css 폴더를 생성! main.css 파일을 생성후 body 태그에 

background-color 아무색이나 입혀보도록 하자 

루트 경로의 index.html 에 링크로 main.css 파일을 연결해줄텐데 1번파트에서 다뤘다 시피 

dist 폴더안에 있는 index.html 파일을 기준으로 하기때문에 ./static 이아닌 ./css 경로로 잡아주어야한다.

 

이번에는 css 폴더를 루트경로로 밖으로 빼내어서 

main.js 안에서 import 시켜주도록 하자

처음에 webpck.config.js 파일에서 entry 즉 진입점을 main.js 로 연결해주어서 webpack 은 

main.js 파일부터 읽어나가서 main.js 에 css 파일을 연결해주면  읽어드릴수 있는 구조가 된다.

즉 webpack 이 main.css 파일을  연결 되어져 있는 index.html 섞어서 다시 dist 폴더로 내어줄수있는 구조를

webpack 이 제공한다.

하지만 webpack 이 css 파일을 읽을수는 없고 단지 합쳐서 dist 폴더에 내어주는 역할만 한다.

그래서 css 파일을 읽어줄수 있는 패키지를 설치해보도록 하겠다.

 

npm i -D css-loader style-loader

 

작성후 개발서버를 열어 주도록 하자!

하지만 에러가 발생!

Error: Can't resolve './css/main.css' in 'C:\Users\kkk\Desktop\webpack-template\js'

main.js 폴더에서 css 파일의 경로 문제이다.

현재 프로젝트에서는 main.js 폴더 주변에서가 아닌 한번더 경로를 벗어나야 한다.

 

변경전

변경후

scss 적용

---

scss 적용하기 앞서 먼저 css 폴더를 scss 로 명칭을 바꿔주도록 하자!

당연히 css 파일도 scss 로 수정!

main.js 에서도 수정!

그리고나서 webpack.config.js 에서 정규표현식을 바꿔 주도록하자

 만약 css 파일이 들어올수 있기때문에 정규표현식을 변경! ?앞에 붙는 단어는 있을수도있고 없을수도 있다는 뜻이다.

.scss or .css 모두 매칭!

그렇다면 css-loder 와 마찬가지로 scss 를 읽어줄 수 있는 패캐지를 설치 해보자!

npm i -D sass-loader sass

참고로 패키지는 전부 개발 의존성 으로 설치해주도록 하자!

 

 

scss 파일로 이동!

적용 완료!

 

 

Autoprefixer(postcss)

---

npm i -D postcss autoprefixer postcss-loader

3개의 패키지 설치! 설치가 완료 됬다면 loader 를 추가

parcel 과 마찬가지로 browserslist 를 작성해주어야한다.

 

루트경로에 똑같이 postcssrc.js 생성후 입력

Babel

---

npm i -D @babel/plugin-transform-runtime @babel/core @babel/preset-env

이차원 배열 주의!

 

npm i -D babel-loader

git 버전관리

이그노어에 버전관리를 안할 폴더를 명시!

 

이후 git-hub 에 푸쉬 절차는 생략하겠음!

 

deploy

마지막으로 배포만 남았다 ㅎㅎ 

Netlify 접속후 로그인까지 진행!

원할하게 진행중 deploy 실패... 

 

에러 내용을 자세히 보니 

babel/core 를 찾을수 없다고 한다.

 

다시 프로젝트로 돌아와서 babel core 를 설치 해보자!

npm i -D @babel/core

설치 진행후 git-hub 에 push  주었지만 또다시 deploy 실패 ㅠㅠ...

자세히 보니 npm i babel 을 설치해도 devdependencies 에 목록이 나오지를 않았다..

확인 후 직접입력해주고 다시 설치 진행!

npm i

말끔히 배포 성공 ! ㅎㅎ