To v4 from v3

이 가이드는 최종 사용자에게 영향을 주는 주요 변경 사항들을 보여줍니다. 더 자세한 사항은 변경 사항을 참고하세요.

Node.js v4

Node.js v4 이하의 버전을 사용하고 있다면, Node.js v6 이상으로 업그레이드할 필요가 있습니다.

Node.js의 버전을 업그레이드 하기 위한 지침 사항들은 이곳에서 찾아볼 수 있습니다.

CLI

CLI는 분리된 패키지(webpack-cli)로 옮겼습니다. webpack을 사용하기 전에 CLI를 설치해야합니다. 기본 설정을 참고하세요.

설치 가이드는 이곳에서 찾을 수 있습니다.

Update plugins

대부분의 3rd party 플러그인은 webpack 4와 호환되는 최신 버전으로 업데이트 해야합니다. 잘 알려진 플러그인들에 대한 링크는 이곳에서 찾아 볼 수 있습니다.

mode

설정에 새로운 mode 옵션을 추가하세요. 설정 타입에 따라 'production', 'development' 혹은 'none'으로 설정하세요.

webpack.config.js

module.exports = {
  // ...
+  mode: 'production',
}

Deprecated/Removed plugins

이러한 플러그인은 프로덕션 모드에서 기본 제공되므로 설정에서 제거할 수 있습니다.

webpack.config.js

module.exports = {
  // ...
  plugins: [
-    new NoEmitOnErrorsPlugin(),
-    new ModuleConcatenationPlugin(),
-    new DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") })
-    new UglifyJsPlugin()
  ],
}

이러한 플러그인은 프로덕션 모드에서 기본으로 제공됩니다.

webpack.config.js

module.exports = {
  // ...
  plugins: [
-    new NamedModulesPlugin()
  ],
}

이러한 플러그인은 더 이상 사용되지 않고, 현재는 삭제되었습니다.

webpack.config.js

module.exports = {
  // ...
  plugins: [
-    new NoErrorsPlugin(),
-    new NewWatchingPlugin()
  ],
}

CommonsChunkPlugin

CommonsChunkPlugin은 삭제되었습니다. 대신 optimization.splitChunks을 사용할 수 있습니다.

더 자세한 사항은 optimization.splitChunks 문서에서 찾을 수 있습니다. 기본 설정은 이미 요구사항을 충족할 것입니다.

import() and CommonJS

non-ESM을 불러오기 위해 import()을 사용할 때, webpack 4에서 결과는 바뀝니다. 그래서 module.exports의 값을 얻기 위해 default 프로퍼티에 접근할 필요가 있습니다.

non-esm.js

module.exports = {
  sayHello: () => {
    console.log('hello world');
  },
};

example.js

function sayHello() {
  import('./non-esm.js').then((module) => {
    module.default.sayHello();
  });
}

json and loaders

.json 파일을 변환하기 위해 사용자 지정 로더를 사용할 때, type 모듈을 바꿔야 합니다.

webpack.config.js

module.exports = {
  // ...
  rules: [
    {
      test: /config\.json$/,
      loader: 'special-loader',
+     type: 'javascript/auto',
      options: {...}
    }
  ]
};

아직도 json-loader를 사용한다면, 이것을 지울 수 있습니다.

webpack.config.js

module.exports = {
  // ...
  rules: [
    {
-     test: /\.json$/,
-     loader: 'json-loader'
    }
  ]
};

module.loaders

module.loaders는 webpack 2부터 사용하지 않으며, 현재는 module.rules에 따라 삭제했습니다.