[Webpack] optimization 의 minimizer 적용 시, js 번들 파일 경량화(minimize) 가 풀려요

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()],
  },
});

1. 위와 같은 웹팩 설정 파일로 배포 모드 번들링을 실행
2. npm webpack --config webpack.config.prod.js
3. css 파일은 잘 경량화되었으나, 기존 js 번들 파일(app.bundle.js) 이 경량화가 되지 않음.
4. optimization 속성을 삭제하니, app.bundle.js 는 경량화되나, css 파일은 다시 경량화 풀림
5. 두 파일 모두 경량화 시키는 방법이 필요함.

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(), '...'],
  },
});