配置类型

除了导出一个单独的配置对象外，还有其他几种方式可以满足不同需求。

导出一个函数

最终你可能会发现在 webpack.config.js 中需要区分开发环境构建和生产环境构建。有多种方法可以做到这一点。其中一种选择是从你的 webpack 配置中导出一个函数，而不是导出一个对象。该函数将被调用并传入两个参数

• 环境作为第一个参数。请参阅环境选项 CLI 文档以获取语法示例。
• 一个选项映射（argv）作为第二个参数。这描述了传递给 webpack 的选项，其键包括 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
         }
       })
     ]
+  };
};

导出一个 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

如果你有一个配置依赖于另一个配置的输出，你可以使用 dependencies 数组来指定依赖列表。

webpack.config.js

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

parallelism

如果你导出多个配置，你可以在配置数组上使用 parallelism 选项来指定将并行编译的编译器最大数量。

• 类型：number
• 可用版本：5.22.0+

webpack.config.js

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