webpack.config.js 多种配置类型

一般配置 webpack.config.js 文件都是直接到一个对象（object）来描述 webpack 的配置，但是除此之外，还有更加灵活的方式。

导出一个函数 function

导出一个函数最大的好处就是一份多用。毕竟 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({
                // 最紧凑的输出
                beautify: false,
                // 删除所有的注释
                comments: false,
                compress: {
                    // 在UglifyJs删除没有用到的代码时不输出警告
                    warnings: false,
                    // 删除所有的 `console` 语句，可以兼容ie浏览器
                    drop_console: true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars: true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars: true,
                }
            })
        )
    }

    return {
        // JS 执行入口文件
        entry: './main.js',
        output: {
            // 把所有依赖的模块合并输出到一个 bundle.js 文件
            filename: 'bundle.js',
            // 输出文件都放到 dist 目录下
            path: path.resolve(__dirname, './dist'),
        },
        plugins: plugins,
        // 在生成环境不输出 Source Map
        devtool: isProduction ? undefined : 'source-map',
    };
}

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

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

导出一个返回 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（==CMD）、CMD（sea.js）、AMD（require.js） 和 UMD（前三者的集合）。