'webpack.optimize.CommonsChunkPlugin'에 해당되는 글 1건

webpack.config.js에서 webpack.optimize.CommonsChunkPlugin를 없애고, optimization.splitChunks를 바꿔준다.

var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var TerserJSPlugin = require("terser-webpack-plugin");
var ManifestPlugin = require("webpack-manifest-plugin");

module.exports = {
  mode: "production", //배포용으로 변경, development 경우 제대로 압축이 안됨
  // output을 두개로 나눠서 생성한다. 하나는 전체적인 import부분이 example.js
  // libray는 외부의 라이브러리(node_modules에 설치한 라이브러리)
  entry: { main: "./app/js/example.js", library: ["jquery" , "moment"] },
  output: {
    // output으로 배출한 js의 이름은 entry.key 값으로 생성된다.
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { url: false, sourceMap: true } }
        ]
      }
    ]
  },
  optimization: {
    splitChunks: { //추가된 부분 main.js에서 라이브러리르 분리하는 작업
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "library",
          chunks: "all"
        }
      }
    },
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "style.css" }),
    new ManifestPlugin({
      fileName: "manifest.json",
      basePath: "./dist/"
    }) // 번들링한 모든 결과물을 확인이 가능함.
  ]
};