[webpack 4] vendor와 common 합체

webpack을 3에서 4로 업데이트 했다.

같은 툴인데 뭐가 얼마나 다르겠나 하고 시작했다.

많이 달랐다.

이 쉐키들...

일단 가장 중요한 요소로, CommonsChunkPlugin 이 deprecated 되어 사용할 수 없게 되었다.

대신 config.optimization.splitChunks 를 사용해야 한다.

샘플만 보고 따라했더니, 기존에 common 으로 묶었던 공통 js가 vendor.js 와 common.js 로 분리되었다.

게다가 css도 단일 파일로 만들던것이 직접 만든 css 파일들이 포함되지 않게 되어버렸다.

구글을 하루 종일 뒤진 끝에 분리 된 파일들을 병합할 수 있었다.

추가/변경 된 부분만 나열하자면 이렇다. (기존 entry 등은 대부분 동일하다)

mode: "none",

env 셋팅이 dev, production 어느것으로든 되어 있어야 하는 모양이다. "none"으로 해두어도 해결 가능하다.

optimization: {
   splitChunks: {
      cacheGroups: {
         default: false,
         commons: {
            test: /node_modules/,
            name: "common",
            chunks: "initial",
            minSize: 1,
            reuseExistingChunk: true,
            enforce: true,
         },
         styles: {
            name: 'common',
            test: /\.(c|sc|sa|le)ss$/,
            chunks: 'all',
            reuseExistingChunk: true,
            enforce: true
         }
      }
   },
},

가장 골치아팠던 부분이다.

공식문서에 vendor만 있어서 따라했는데, commons 설정 항목이 있었다.

enforce:true 설정이 있으며 entry에 기재 된 common과 자동으로 병합 해 준다.

styles 에서는 reuseExistingChunk: true 설정이 되어있지 않으면, css(또는 공통js인 common.js)를 import하는 각 js마다 css를 따로 생성한다.

styles의 test 항목은 css만 사용하는 경우가 아니라면 scss, sass, less 확장자에 대한 대비를 해주지 않으면 각 js마다 css를 따로 생성한다.

위와 같이 설정하면 node_modules 내의 css와 직접 생성한 css를 모두 common.css로 빌드할 수 있다.

{
   test: /\.css$/,
   use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},

css 로더는 ExtractTextPlugin을 MiniCssExtractPlugin.loader 로 변경했다.

영향이 있는건지는 아직은 잘 모르겠다.

babel-loader, url-loader, file-loader 등은 그대로 사용하고 있다.

그 외에는 불필요한 메시지 출력이 많아서 hints 항목을 비활성화 한 정도.

performance: {
   hints: false
},