設定の種類

単一の設定オブジェクトをエクスポートする以外にも、他のニーズをカバーするいくつかの方法があります。

関数をエクスポートする

最終的には、webpack.config.js内で、開発と本番ビルドを区別する必要が出てくるでしょう。これを行う方法は複数あります。1つの選択肢は、オブジェクトをエクスポートする代わりに、webpack設定から関数をエクスポートすることです。関数は2つの引数で呼び出されます。

• 最初のパラメータとしての環境。環境オプションCLIドキュメントで構文の例を参照してください。
• 2番目のパラメータとしてのオプションマップ（argv）。これは、output-pathやmodeなどのキーを持つ、webpackに渡されたオプションを表します。

-module.exports = {
+module.exports = function(env, argv) {
+  return {
+    mode: env.production ? 'production' : 'development',
+    devtool: env.production ? 'source-map' : 'eval',
     plugins: [
       new TerserPlugin({
         terserOptions: {
+          compress: argv.mode === 'production' // only if `--mode production` was passed
         }
       })
     ]
+  };
};

Promiseをエクスポートする

Webpackは設定ファイルによってエクスポートされた関数を実行し、Promiseが返されるのを待ちます。構成変数を非同期でロードする必要がある場合に便利です。

module.exports = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        entry: './app.js',
        /* ... */
      });
    }, 5000);
  });
};

複数の構成をエクスポートする

単一の構成オブジェクト/関数をエクスポートする代わりに、複数の構成をエクスポートすることができます（複数の関数はwebpack 3.1.0以降でサポートされています）。webpackを実行すると、すべての構成がビルドされます。たとえば、これは、AMDやCommonJSなどの複数のターゲットに対してライブラリをバンドルするのに役立ちます。

module.exports = [
  {
    output: {
      filename: './dist-amd.js',
      libraryTarget: 'amd',
    },
    name: 'amd',
    entry: './app.js',
    mode: 'production',
  },
  {
    output: {
      filename: './dist-commonjs.js',
      libraryTarget: 'commonjs',
    },
    name: 'commonjs',
    entry: './app.js',
    mode: 'production',
  },
];

依存関係

ある構成が別の構成の出力に依存する場合、dependencies配列を使用して依存関係のリストを指定できます。

webpack.config.js

module.exports = [
  {
    name: 'client',
    target: 'web',
    // …
  },
  {
    name: 'server',
    target: 'node',
    dependencies: ['client'],
  },
];

並列処理

複数の構成をエクスポートする場合、構成配列でparallelismオプションを使用して、並列にコンパイルするコンパイラーの最大数を指定できます。

• 型: number
• 利用可能: 5.22.0+

webpack.config.js

module.exports = [
  {
    //config-1
  },
  {
    //config-2
  },
];
module.exports.parallelism = 1;