你所不知的Webpack-多种配置方法

除了经过最多见的导出一个 Object 来描述 Webpack 所需的配置外，还有其它更灵活的方式，以简化不一样场景的配置。 下面来一一介绍它们。

导出一个 Function

在大多数时候你须要从同一份源代码中构建出多份代码，例如一份用于开发时，一份用于发布到线上。

若是采用导出一个 Object 来描述 Webpack 所需的配置的方法，须要写量个文件。 一个用于开发环境，一个用于线上环境。再在启动时经过 webpack --config webpack.config.js 指定使用哪一个配置文件。

采用导出一个 Function 的方式，能经过 JavaScript 灵活的控制配置，作到只用写一个配置文件就能完成以上要求。

导出一个 Function 的使用方式以下：

const path = require('path');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

module.exports = function (env = {}, argv) {
  const plugins = [];

  const isProduction = env['production'];

  // 在生成环境才压缩
  if (isProduction) {
    plugins.push(
      // 压缩输出的 JS 代码
      new UglifyJsPlugin()
    )
  }

  return {
    plugins: plugins,
    // 在生成环境不输出 Source Map
    devtool: isProduction ? undefined : 'source-map',
  };
}
复制代码

在运行 Webpack 时，会给这个函数传入2个参数，分别是：

1. env：当前运行时的 Webpack 专属环境变量，env 是一个 Object。读取时直接访问 Object 的属性，设置它须要在启动 Webpack 时带上参数。例如启动命令是 webpack --env.production --env.bao=foo时，则 env 的值是 {"production":"true","bao":"foo"}。
2. argv：表明在启动 Webpack 时全部经过命令行传入的参数，例如 --config、--env、--devtool，能够经过 webpack -h 列出全部 Webpack 支持的命令行参数。

就以上配置文件而言，在开发时执行命令 webpack 构建出方便调试的代码，在须要构建出发布到线上的代码时执行 webpack --env.production 构建出压缩的代码。

本实例 提供项目完整代码

导出一个返回 Promise 的函数

在有些状况下你不能以同步的方式返回一个描述配置的 Object，Webpack 还支持导出一个返回 Promise 的函数，使用以下：

module.exports = function(env = {}, argv) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        // ...
      })
    }, 5000)
  })
}
复制代码

导出多份配置

除了只导出一份配置外，Webpack 还支持导出一个数组，数组中能够包含每份配置，而且每份配置都会执行一遍构建。

注意本特性从 Webpack 3.1.0 版本才开始支持。

使用以下：

module.exports = [
  // 采用 Object 描述的一份配置
  {
    // ...
  },
  // 采用函数描述的一份配置
  function() {
    return {
      // ...
    }
  },
  // 采用异步函数描述的一份配置
  function() {
    return Promise();
  }
]
复制代码

以上配置会致使 Webpack 针对这三份配置执行三次不一样的构建。

这特别适合于用 Webpack 构建一个要上传到 Npm 仓库的库，由于库中可能须要包含多种模块化格式的代码，例如 CommonJS、UMD。

《深刻浅出Webpack》全书在线阅读连接

阅读原文