Ch 0. 개발환경 설정 Webpack 2

module 속성을 추가해준다.
css파일을 use 설정의 로더들을 사용해서 읽어들이겠다는 의미이다.

• module 속성은 프로젝트 내의 여러 유형의 모듈들을 처리할 방법을 결정
• module.rules : 모듈이 생성 될 때 요청과 일치하는 규칙 의 배열
• module.rules.test : loader를 적용시킬 파일들을 정규식으로 명시
• module.rules.loader : 사용할 loader 명시

사용할 loader가 많을 경우엔 Rule.use:[ { loader }] 로 사용가능
Rules.loaders 는 Rule.use로 사용
Rules.loader: ['loader'] 처럼 배열로도 사용가능

로더는 여러 로더를 전달하여 연결될 수 있는데 오른쪽에서 왼쪽으로 적용된다는점이 주의사항이다. 위의 코드에서는
첫번째로 적용되는것이 css-loader
두번째로 적용되는것이 MiniCssExtractPlugIn.loader

css-loader 로 css파일들을 읽은 뒤 MiniCssExtractPlugIn.loader를 통해 css파일들을 별도의 파일로 추출한다.

Css 파일들의 압축과 관련된 CssMinimizerPlugIn을 적용한다.

이전에 HtmlWebpackPlugIn을 적용하면서 template에 적용된 ./index.html 파일안에서 lodash 문법을 사용할 수 있게 해준다.
유틸성 메소드나 템플릿 관련 메소드들을 제공해주는 라이브러리이다.

 

 

index.html 파일에서 lodash를 이용하여 title태그를 설정하고 css파일에서 간단하게 색깔을 설정한 뒤 index.js파일에서 css파일을 불러온다.

그 후 package.json 파일에서 scripts 속성에 build 명령어를 설정해준뒤 빌드를 실행한다.
scripts 속성은 빌드, 실행 등에 사용되는 명령어를 선언하거나 패키지의 install, publish 전/후에 실행되는 스크립트 명령어를 선언할 때 사용된다.

npm run build

오류가 나왔는데 별건 아니고 단순한 오타 문제다.
webpack.config.js 파일에 plugins 속성을 plugin이라고 적어놓았기에 발생한 오류. 수정해서 다시한번 실행해준다.

이것도 오타.. index.html에서 PlugIn부분을 Plugin으로 %를 %=로 수정하고 다시 실행.

성공적으로 빌드가 마무리되었다.

그런데 보통 빌드를 할때에는 production 환경에 배포를 하기위해서 빌드를 실행한다. 지금은 html js css 파일들이 그냥 development 환경에서 빌드가 되어서 그대로 들어가있다.

package.json 파일에서 빌드의 mode를 production으로 바꿔준다.
그 후 빌드를 진행할 파일들에 줄바꿈이나 공백, 추가 내용들을 적어준다.

 

그 후 다시한번 빌드를 진행해보면 production mode와 development mode와의 차이점을 확인해볼 수 있다.

 

 

여기까지가 webpack을 이용한 build를 진행해보는 설정을 배워보았다.

마지막으로 webpack dev-server를 이용해서 dev-server를 뛰우는 과정을 진행해보자.

webpack.config.js 파일에서 devServer 속성을 추가해준다.

• host는 localhost
• port는 8080
• open 속성은 webpack-dev-server를 실행할때마다 브라우저창을 실행한다.
• watchFiles 속성은 index.html이 변화가 있을때마다 리로드를 해준다. html의 변화를 감지시켜준다.

그러면 webpack-dev-server를 실행해준다.

npx webpack-dev-server

 

이 상태에서 index.html과 style.css를 수정하고 저장해본다.

 

 

브라우저를 따로 새로고침하지 않아도 webpack-dev-server에서 자동으로 변경된 내용을 반영해준다.

본래라면 개발을 진행하면서 변경된 내용들을 확인하기위해서 브라우저 창을 변경된 내용이 있을때마다 새로고침을 눌러서 변경된 내용을 확인하여야 하는데 webpack-dev-server를 적용함으로써 보다 더 나은 개발환경에서 개발을 진행할 수 있게 되었다.

마지막으로 package.json 파일의 scripts 속성에서 webpack-dev-server를 실행하는데 편해지기 위해서 dev 명령어를 추가해서 적용해준다.