webpack命令行配置项的接受和处理

2021年11月16日 • ... • ☕️ 1 min read

webpack配置项

webpack作为一个整体，他通过CLI接收命令，并处理我们的原始代码，最后输出指定配置的文件。通常，我们会通过一些env.mode等方式，动态传入一些配置项，那么这些配置项是什么含义呢？

1、导出类型

每个webpack配置文件，都会有

module.exports = {
  //
}

这意味着，以一个对象方式导出webpack配置项，这是我们最常用的配置方式。但是，除此之外，webpack也支持以function、promise，或者数组方式导出配置。

函数

以函数方式导出的优点即函数的优点—可以传递参数。通常，webpack支持两个参数：环境（environment）和配置项变量（argv）。

v4：支持参数以--env prod或者--env.mode=prod --env.platform=app形式传递前者取到的参数格式为{prod: true}，后者取到的参数格式为{mode: 'prod', platform: 'app'}

v5：显著区别是支持参数合并。例如： --env mode=prod platform=app会得到{mode: 'prod', platform: 'app'}，v4中会得到一个报错。 --env app.platform=pc app.api=test会得到{app: {platform: 'pc', api: 'test'}}。

应用：以--env.mode=prod/test/prod区分环境，并使用--env.api=dev/test/prod调用不同环境接口。二者结合，可以在同一环境，组合调用不同环境接口。

参考文档：webpack-命令行-环境变量选项

promise

当需要异步加载配置变量时，webpack会执行函数并等待取得Promise返回值。

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