Webpack 4

Webpack3에서 Webpack4로 진화... 성능향상, 설정방법 변경 등이 있어 간단히 정리해 보았다.
일단 Webpack4에서는 mode 옵션이 추가되었다. development, production mode 이다.
기존 개발시에는 production 빌드시 minify, uglify를 설정하여 빌드 하였지만 webpack4에서 production 모드 빌드시 코드 minify만 신경 써주면 된다고 한다.

webpack 3 -> webpack 4

development, production 모드로 환경설정을 할 수 있도록 나뉨 -빌드 속도 개선, webpack 3에 비해 98% 향상 가능하다고함
0CJS (Zero Configuration Javascript) 설정 없이 빌드 가능

webpack config

webpack.config.js

const path = require('path')

module.exports = {
  entry: {
    app: ['./src/index.js'],
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

webpack.config.dev.js

// ...
module.exports = {
  mode: 'development', // production 설정 파일에서는 'production'
  // ...
}

특정 설정파일을 이용해 빌드할때 --config 옵션 사용
npx webpack --config webpack.config.dev.js

options에 mode를 사용하여 mode별 빌드 설정

module.exports = (env, options) => {
  const config = {
    entry: {
      app: ['./src/index.js'],
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  }

  if (options.mode === 'development') {
    //... Development 설정
  } else {
    //... Production 설정
  }

  return config
}

혹은 webpack-merge를 사용하여 기본설정과 호출될 설정을 합친다

const merge = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
    mode: 'development',
    ....
});

development인 경우 디버깅을 위한 devtool: 'source-map'
production인 경우 webpack4에서는 UglifyWebpackPlugin이 내장되어있어 따로 설정 안해줘도됨, webpack.optimize.UglifyJsPlugin으로 설정 할 수 있다고 한다.

build

clean-webpack-plugin을 사용하여 빌드전 dist 폴더를 지우고 생성

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = (env, options) => {
    ....
    config.plugins = [
        new CleanWebpackPlugin(['dist'])
    ];
    ....
}

package.json script 설정

"scripts": {
    "build": "webpack --mode development",
    "build-prod": "webpack --mode production"
}

babel7 에서는 모두 @babel/preset-env를 사용, react를 사용한다면 @babel/preset-react

{
   "presets": ["@babel/preset-env", "@babel/preset-react]
}