博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入浅出webpack学习(11)--多种类型配置
阅读量:5942 次
发布时间:2019-06-19

本文共 1741 字,大约阅读时间需要 5 分钟。

除了通过导出一个Object来描述webpack所需要的配置,还有其他更灵活的方式,以简化不同场景的配置。下面来一一介绍它们。

1. 导出一个Function

在大多数时候可能需要从同一份源代码中构建出多份代码,例如一份用于开发时,一份用于发布到线上。

如果采用导出一个Object来描述webpack所需配置的方法需要写两个文件。一个用于开发环境,一个用于线上环境。再在启动时通过webpack --config webpack.config.js指定使用哪个配置文件。

采用导出一个Function的方式,能通过JavaScript灵活的控制配置,做到只用写一个配置文件就能完成以上要求。

const path = require('path')const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')module.exports = function(env={}, argv) {    const plugins = []    const isProducton = env['production']        // 在生成环境才压缩     if (isProduction) {        plugins.push(         // 压缩输出的 JS 代码         new UglifyJsPlugin()     )          return {        plugins: plugins,        // 在生成环境不输出 Source Map        devtool: isProduction ? undefined : 'source-map',      };  }

在运行webpack时,会给这个函数传入2个参数,分别是:

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

就以上配置文件而言,在开发时执行命令webpack构建出方便调试的代码,在需要构建发布到线上的代码时执行webpack --env.production构建出压缩代码。

2. 导出一个返回promise的函数

有些情况下你不能以同步的方式返回一个描述配置的object,webpack还支持导出一个返回promise的函数,使用如下:

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

3. 导出多份配置

除了只导出一份配置外,webpack还支持导出一个数组,数组中可以包含每份配置,并且每份配置都会执行一遍构建。

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

以上配置会导致 Webpack 针对这三份配置执行三次不同的构建。

这特别适合于用 Webpack 构建一个要上传到 Npm 仓库的库,因为库中可能需要包含多种模块化格式的代码,例如 CommonJS、UMD。

转载地址:http://hcqtx.baihongyu.com/

你可能感兴趣的文章
LINQ to SQL活学活用(1):这要打破旧观念
查看>>
Spring boot 嵌入的tomcat不能启动: Unregistering JMX-exposed beans on shutdown
查看>>
【Windows】字符串处理
查看>>
Spring(十八):Spring AOP(二):通知(前置、后置、返回、异常、环绕)
查看>>
CentOS使用chkconfig增加开机服务提示service xxx does not support chkconfig的问题解决
查看>>
微服务+:服务契约治理
查看>>
save
查看>>
Android DrawLayout + ListView 的使用(一)
查看>>
clear session on close of browser jsp
查看>>
asp.net mvc Post上传文件大小限制 (转载)
查看>>
关于吃掉物理的二次聚合无法实现的需要之旁门左道实现法
查看>>
mysql出现unblock with 'mysqladmin flush-hosts'
查看>>
oracle exp/imp命令详解
查看>>
开发安全的 API 所需要核对的清单
查看>>
Mycat源码中的单例模式
查看>>
WPF Dispatcher介绍
查看>>
fiddler展示serverIP方法
查看>>
C语言中的随意跳转
查看>>
006-spring cloud gateway-GatewayAutoConfiguration核心配置-GatewayProperties初始化加载、Route初始化加载...
查看>>
WPF中如何将ListViewItem双击事件绑定到Command
查看>>