webpack 参数详解-你不知道的Webpack——多种配置方式

bendan520 webpack

2023-09-04 0 1,798 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

除了通过最常见的导入一个Object来描述Webpack所需的配置之外，还有其他更灵活的形式来简化不同场景的配置。我们来一一介绍一下。

导入函数

大多数时候，您需要从同一源代码创建多个代码副本，例如一份用于开发，一份用于在线发布。

如果使用导入Object的方式来描述Webpack所需的配置，则需要编写几个文件。一种用于开发环境webpack 参数详解，一种用于有线环境。然后在启动时通过webpack--configwebpack.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时，会向该函数传递两个参数，即：

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

就上述配置文件而言，开发时执行命令webpack创建代码，方便调试，需要创建在线发布的代码时，执行webpack --env.Production创建压缩代码。

本示例提供了项目的完整代码

导入一个返回 Promise 的函数

在某些情况下，您无法同步返回描述配置的对象。 Webpack 还支持导入返回 Promise 的函数，使用方法如下：

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

复制

导入多个配置

除了只导入一个配置之外，Webpack 还支持导入一个链表，链表可以包含每一个配置webpack 参数详解，但是每一个配置都会进行一次重构。

请注意，仅 Webpack 版本 3.1.0 支持此功能。

使用方法如下：

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

复制

上面的配置会导致Webpack针对这三种配置进行三种不同的重构。

这非常适合使用Webpack创建要上传到Npm存储库的库，因为该库可能需要包含多种模块化格式的代码，例如CommonJS和UMD。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!