Webpack Configuration Types

除了導(dǎo)出單個(gè)配置外，還有一些能滿足更多需求的使用方式。

導(dǎo)出函數(shù)

你可能會遇到需要區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境的情況。有很多種方式可以做到這一點(diǎn)。其中一種選擇是由 webpack 配置導(dǎo)出一個(gè)函數(shù)而非對象，這個(gè)函數(shù)包含兩個(gè)參數(shù)：

• 參數(shù)一是環(huán)境（environment）。請查閱 environment 選項(xiàng)文檔了解更多。
• 參數(shù)二是傳遞給 webpack 的配置項(xiàng)，其中包含 ?output-path? 和 ?mode?等。

-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
         }
       })
     ]
+  };
};

導(dǎo)出 Promise

當(dāng)需要異步加載配置變量時(shí)，webpack 將執(zhí)行函數(shù)并導(dǎo)出一個(gè)配置文件，同時(shí)返回一個(gè) Promise。

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

導(dǎo)出多種配置

除了導(dǎo)出單個(gè)配置對象/函數(shù)，你可能也會需要導(dǎo)出多種配置（webpack 3.1.0 起支持）。當(dāng)運(yùn)行 webpack 時(shí)，所有配置項(xiàng)都會構(gòu)建。比如，對于多 targets（如 AMD 和 CommonJS）構(gòu)建 library 時(shí)會非常有用。

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

以防你的某個(gè)配置依賴于另一個(gè)配置的輸出，你可以使用一個(gè) ?dependencies? 列表指定一個(gè)依賴列表。

webpack.config.js

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

parallelism

如果你導(dǎo)出了多個(gè)配置，你可以在配置中使用 ?parallelism? 選項(xiàng)來指定編譯的最大并發(fā)數(shù)。

• 類型：?number?
• 支持版本：5.22.0+

webpack.config.js

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