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

November 16, 2021 ... ☕️ 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);
  });
};

#webpack

SideEffect is a blog for front-end web development.
Code by Axiu / rss