웹팩 과제하다가 살짝정리한거

#entry
-기본값은 index.js
-다른 엔트리포인트 지정할수있다.

#Output
-생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 웹팩에 알려주는 역할.
-path / filename / clean 

# Loader(로더)
-module.rules 아래에 정의해야 한다.
-test속성: 변환이 필요한 파일들을 식별하는 필수속성.
test: /\.js$/
test: /\.css$/
-use속성: 변환을 수행하는데 사용되는 로더를 가리키는 필수속성. 이걸 사용하여 변환한다.
오른쪽에 있는 css먼저 실행한다.
use: ['style-loader', 'css-loader']
use: [MiniCssExtractPlugin.loader, 'css-loader']
-exclude
-include

# Plugins
-로더는 특정 유형의 모듈을 변환하는데 사용되지만, 플러그인을 활용하여 번들을 최적화할수있다.
-플러그인을 사용하려면 require()를 통해 플러그인을 요청하고, plugins 배열에 추가해야한다.
-new 연산자로 호출하여 플러그인의 인스턴스를 만들어야 한다.
-html-webpack-plugin
-mini-css-extract-plugin



--------------
# style-loader의 한계
스타일 로더는 개발 시 편리하지만 배포를 할 경우 성능 이슈가 발생한다. 위에서 언급했듯이 동적으로 CSS를 삽입하기 때문에 배포를 할 경우 정적인 CSS 파일을 생성할 필요가 있다. 이를 위한 플러그인이 miniCssExtractPlugin 이다.

- npm install --save-dev mini-css-extract-plugin

# minicss쓰면 style-loader 지우고 그 자리에 minicss쓴다
--------------------------------
# CssMinimizerPlugin

https://yamoo9.gitbook.io/webpack/webpack/webpack-plugins/minimize-css-files
여기 참고.