v3 から v4 へ

このガイドでは、エンドユーザーに影響を与える主要な変更のみを示しています。詳細については、変更ログを参照してください。

Node.js v4

Node.js v4 以前を使用している場合は、Node.js のインストールを Node.js v6 以降にアップグレードする必要があります。

Node.js バージョンのアップグレード手順はこちらにあります。

CLI

CLI は別のパッケージ webpack-cli に移動しました。webpack を使用する前にインストールする必要があります。基本的な設定を参照してください。

インストールガイドはこちらにあります。

プラグインの更新

多くのサードパーティプラグインは、webpack 4 との互換性のために最新バージョンに更新する必要があります。人気のプラグインへのリンクはこちらにあります。

mode

新しいmodeオプションを構成に追加します。設定の種類に応じて、'production'、'development'、または'none'に設定します。

webpack.config.js

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

非推奨/削除されたプラグイン

これらのプラグインは、本番モードではデフォルトであるため、設定から削除できます。

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() と CommonJS

非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 とローダー

.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に置き換えられました。