에러 노트
[Webpack] optimization 의 minimizer 적용 시, js 번들 파일 경량화(minimize) 가 풀려요
누코(nuuco)
2022. 11. 17. 16:01
2022.7.28 (목) 작성
1. 에러❗️
mode: “production” 으로 번들링 했는데, js 번들 파일(app.bundle.js) 이 한줄로 경량화 되지 않는다.
2. 상황
// webpack.config.base.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
exclude: /node_modules/
}
]
},
plugins: [new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "index.html")
}), new MiniCssExtractPlugin()],
}
// webpack.config.prod.js
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.config.base");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = merge(baseConfig, {
mode: "production",
optimization: {
minimizer: [new CssMinimizerPlugin()],
},
});
- 위와 같은 웹팩 설정 파일로 배포 모드 번들링을 실행
- npm webpack --config webpack.config.prod.js
- css 파일은 잘 경량화되었으나, 기존 js 번들 파일(app.bundle.js) 이 경량화가 되지 않음.
- optimization 속성을 삭제하니, app.bundle.js 는 경량화되나, css 파일은 다시 경량화 풀림
- 두 파일 모두 경량화 시키는 방법이 필요함.
3. 해결💡
- minimizer 속성을 주면 기본 옵션을 덮어씌워버리기 때문에 js 파일의 경량화 옵션이 사라지고, 플러그인만 적용이 문제였다.
- 따라서 웹팩 공식 문서에 따라 뒤에 ‘…’를 넣어주면, 기본 옵션은 유지한 채 플러그인이 적용된다! app.bundle.js 도 css 파일도 모두 경량화 되었다!!
// webpack.config.prod.js
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.config.base");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = merge(baseConfig, {
mode: "production",
optimization: {
// '...'가 없으면 기본 옵션을 덮어씌워버리기 때문에
// app.bundle.js 는 경량화 되지 않는다.
minimizer: [new CssMinimizerPlugin(), '...'],
},
});
728x90
반응형