module.exports = { target: ["web", "es5"], entry: "./src/script.js", output: { path: path.resolve(__dirname, "docs"), filename: "app.bundle.js", clean: true }, module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"], exclude: /node_modules/, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, "src", "index.html"), }), new MiniCssExtractPlugin(), ], optimization: { minimizer: [ new CssMinimizerPlugin(), ] } };
X
를 넣으면 지정된 ECMAScript 버전으로 컴파일할 수 있다.module.exports = { target: ["web", "es5"], };
- 브라우저(web)와 동일한 환경에서 사용하기 위하여 컴파일할 것이며,
- 작성된 코드를 es5 버전으로 컴파일 하겠다고 지정한 것
./src/index.js
//기본 값 module.exports = { ... entry: "./src/index.js", }; //지정 값 module.exports = { ... entry: "./src/script.js", };
./dist/main.js
로 , 생성된 기타 파일의 경우에는 ./dist
폴더로 설정const path = require('path'); // path 모듈 불러오기 module.exports = { ... output: { path: path.resolve(__dirname, "docs"), // 절대 경로로 설정해야 한다. filename: "app.bundle.js", clean: true }, };
output.path
와output.filename
속성을 사용하여 webpack에 번들의 이름과 내보낼 위치를 알려주고 있다.path
속성을 사용할 때는 path 모듈을 사용해야만 한다.
module.rules
속성 아래 아래의 속성들을 정의한다.
(test
,use
는 필수 속성)
test
(필수) : 변환이 필요한 파일들을 식별하기 위한 속성use
(필수) : 변환을 수행하는데 사용되는 로더를 가리키는 속성exclude
: 바벨로 컴파일하지 않을 파일이나 폴더를 지정.
(반대로 include 속성을 이용해 반드시 컴파일해야 할 파일이나 폴더 지정 가능)
module.exports = { ... module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"], exclude: /node_modules/, }, ], }, };
1) require()를 통해 먼저 플러그인을 요청
2) plugins 배열에 사용하고자 하는 플러그인을 추가
(대부분의 플러그인은 사용자가 옵션을 통해 지정할 수 있음)
3) 다른 목적으로 플러그인을 여러 번 사용하도록 설정할 수 있기 때문에 new 연산자를 사용해 호출하여 플러그인의 인스턴스를 만들어줘야 한다.
const webpack = require('webpack'); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { ... plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, "src", "index.html"), }), new MiniCssExtractPlugin(), ], };
html-webpack-plugin
: 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성해준다mini-css-extract-plugin
: CSS를 별도의 파일로 추출해 CSS를 포함하는 JS 파일 당 CSS 파일을 작성해주게끔 지원
Optimization에서 사용되는 옵션들
minimize
:TerserPlugin
또는optimization.minimize
에 명시된 plugins.
: bundle 파일을 최소화(=압축)시키는 작업 여부를 결정minimizer
: defualt minimizer을 커스텀된 TerserPlugin 인스턴스를 제공해서 재정의할 수 있다.
module.exports = { ... optimization: { minimizer: [ new CssMinimizerPlugin(), ] } };
mini-css-extract-plugin
에 관련된 번들을 최소화하도록 지시하고 있다.