【Webpack系列】配置项类型

通常情况下，我们项目里的webpack配置文件都是都导出一个对象，但其实除了导出对象，还可以有其它的导出方式，列举如下

• js对象，这也是最常见的方式
• 函数，在用于获取 命令行参数 的场景下使用
• promise，存在 异步处理 逻辑时使用
• 数组，用于 多构建 场景

接下来分别介绍上述的类型

js对象

这是最常见的场景，其实这也是我目前唯一使用过的方式 = =，使用方式很简单，直接导出一个对象就ok了，示例如下

const path = require('path')

module.exports = {
  entry: './src/entry.js',
  output: {
    path: path.join(__dirname,'dist'),
    filename: 'output.js'
  }
}

这种方式没有需要深挖的东西，next！

函数

这种形式的实现方式就是导出一个函数，这个函数接受两个参数

• 参数一是 环境对象，保存有所有通过 –env 传递的参数的对象，例如 npx webpack --env platform=app --env production # env.platform等于'app' env.production等于true
• 参数二是保存有所有传递给 webpack-cli 的参数的对象，例如 npx webpack --mode production # argv.mode等于'production',可选的命令行参数列举如下
  • –entry：应用程序的入口文件
  • –config, -c：提供 webpack 配置文件的路径
  • –output-path, -o：webpack 生成文件的输出位置
  • –target, -t：设置要构建的 target
  • –watch, -w：监听文件变化
  • –hot, -h：启用 HMR
  • –mode：定义 webpack 所需的 mode
  • –version, -v：获取当前 cli 版本

示例如下：

const path = require('path')

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

promise

当需要 异步加载 webpack配置项时，就需要导出一个 promise, 支持使用 Promise.all 导出多个promise,示例如下

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

数组

这种方式在多targets（如 AMD 和 CommonJS）构建 library 时会非常有用，在webpack打包时，每一个配置项都会进行 各自的 打包工作，从而输出 不同的 构建产物，配置示例如下：

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'
  }
]

结语

虽然大多数场景下导出对象就足够用了，但掌握更多类型的使用方式可以满足特定场景下的需求，让我们更加从容面对不同的场景与挑战，这也是与其它人拉开差距的地方，所以，加油把，骚年！