[Webpack] webpack3 에서 webpack4 업그레이드 하기

npm 라이브러리 버전 올리기

이름	구 버전	현 버전
webpack	3.8.0	4.44.2
webpack-dev-server	2.9.7	3.11.3
webpack-cli	X	3.3.0
html-webpack-plugin	2.30.1	3.2.0
vue-loader	13.3.0	14.2.2
uglifyjs-webpack-plugin	1.1.1	X
extract-text-webpack-plugin	3.0.2	4.0.0-beta.0
@babel/core	X	7.23.2
@babel/preset-env	X	7.23.2
babel-loader	7.1.1	8.2.5
babel-core	6.22.1	X
babel-preset-env	1.3.2	X
compression-webpack-plugin	X	4.0.1 웹팩버전과 맞춰야함
compression	X	1.7.4 serve.js 압축 사용

빌드 설정 변경

• webpack 3 에서 기존 제공되지 않았던 기능들을 플러그인으로 대체해 사용하였지만 webpack 4 에서는 기본 제공하는 기능이 되어 빌드설정 변경
• webpack.IgnorePlugin : 플러그인 중 필요한 모듈만 사용하고 사용하지 않는 모듈들은 빌드되지 않도록 하는 설정 ex) moment.js / locale
• vendor 에 모든 npm 이 다운로드 되어 초기렌더링 속도가 느림, 각각 패키지를 다운하도록 변경
• 난독화한(Uglify) 코드에 gzip(GNU zip) 알고리즘을 써서 더 압축 : js 파일을 .gz 파일로 압축하고 브라우저에서 .gz 파일을 열수 있도록 설정

// webpack.config.js

mode: "devlopment",

optimization: {
  minimize: true, //UglifyJsPlugin 계승
  runtimeChunk: 'single',
  splitChunks : {
    chunks: 'all',
    maxInitialRequests: Infinity,
    minSize: 0,
    cacheGroups: {
    vendor: {
      test: /[\\/]node_modules[\\/]/,
      name(module) {
      // get the name. E.g. node_modules/packageName/not/this/part.js
      // or node_modules/packageName
      const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
      // npm package names are URL-safe, but some servers don't like @ symbols
      return `npm.${packageName.replace('@', '')}`;
      },
    },
   },
  },
  concatenateModules: true, //ModuleConcatenationPlugin을 계승
},

plugin: [
  new webpack.IgnorePlugin({
    resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
  }),
  new CompressionWebpackPlugin({
    filename: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.js$|\.css$|\.scss$|\.html$/,
    threshold: 10240,
    minRatio: 0.8
  }),
]