webpack新版本4.12应用九(配置文件之多种配置类型)
除了导出单个配置对象,还有一些方式满足其他需求。
导出为一个函数
最终,你会发现需要在开发和生产构建之间,消除 webpack.config.js
的差异。(至少)有两种选项:
作为导出一个配置对象的替代,还有一种可选的导出方式是,从 webpack 配置文件中导出一个函数。该函数在调用时,可传入两个参数:
- 环境对象(environment)作为第一个参数。有关语法示例,请查看CLI 文档的环境选项。 一个选项 map 对象(
argv
)作为第二个参数。这个对象描述了传递给 webpack 的选项,并且具有output-filename
和optimize-minimize
等 key。
-module.exports = {
+module.exports = function(env, argv) {
+ return {
+ mode: env.production ? 'production' : 'development',
+ devtool: env.production ? 'source-maps' : 'eval',
plugins: [
new webpack.optimize.UglifyJsPlugin({
+ compress: argv['optimize-minimize'] // 只有传入 -p 或 --optimize-minimize
})
]
+ };
};
导出一个 Promise
webpack 将运行由配置文件导出的函数,并且等待 Promise 返回。便于需要异步地加载所需的配置变量。
module.exports = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
entry: './app.js',
/* ... */
})
}, 5000)
})
}
导出多个配置对象
作为导出一个配置对象/配置函数的替代,你可能需要导出多个配置对象(从 webpack 3.1.0 开始支持导出多个函数)。当运行 webpack 时,所有的配置对象都会构建。例如,导出多个配置对象,对于针对多个构建目标(例如 AMD 和 CommonJS)打包一个 library 非常有用。
module.exports = [{
output: {
filename: './dist-amd.js',
libraryTarget: 'amd'
},
entry: './app.js',
mode: 'production',
}, {
output: {
filename: './dist-commonjs.js',
libraryTarget: 'commonjs'
},
entry: './app.js',
mode: 'production',
}]
webpack新版本4.12应用九(配置文件之多种配置类型)的更多相关文章
- webpack新版本4.12应用九(配置文件之使用不同语言进行配置)
使用不同语言进行配置(configuration languages) 查看原文|编辑此页 webpack 接受以多种编程和数据语言编写的配置文件.支持的文件扩展名列表,可以在 node-interp ...
- webpack新版本4.12应用九(配置文件之模块(module))
这些选项决定了如何处理项目中的不同类型的模块. module.noParse RegExp | [RegExp] RegExp | [RegExp] | function(从 webpack 3.0. ...
- webpack新版本4.12应用九(配置文件之输出(output))
output 位于对象最顶级键(key),包括了一组选项,指示 webpack 如何去输出.以及在哪里输出你的「bundle.asset 和其他你所打包或使用 webpack 载入的任何内容」. ou ...
- webpack新版本4.12应用九(配置文件之入口和上下文(entry and context))
entry 对象是用于 webpack 查找启动并构建 bundle.其上下文是入口文件所处的目录的绝对路径的字符串. context string 基础目录,绝对路径,用于从配置中解析入口起点(en ...
- webpack新版本4.12应用九(配置文件之configuration)
配置 查看原文|编辑此页 webpack 是需要传入一个配置对象(configuration object).取决于你如何使用 webpack,可以通过两种方式之一:终端或 Node.js.下面指定了 ...
- webpack学习笔记--多种配置类型
除了通过导出一个 Object 来描述 Webpack 所需的配置外,还有其它更灵活的方式,以简化不同场景的配置. 下面来一一介绍它们. 导出一个 Function 在大多数时候你需要从同一份源代码中 ...
- 1-2 hibernate主配置文件hibernate.cfg.xml详解
详 http://www.cnblogs.com/biehongli/p/6531575.html Hibernate的主配置文件hibernate.cfg.xml 1:Hibernate的主配置文件 ...
- 关于centos7和centos6中平滑升级nginx到新版本v1.12.1修复nginx最新漏洞CVE-2017-7529的解决方案
关于centos7和centos6中平滑升级nginx到新版本v1.12.1修复CVE-2017-7529漏洞的解决方案 漏洞描述 2017年7月11日,Nginx官方发布最新的安全公告,在Nginx ...
- webpack项目调试以及独立打包配置文件
webpack项目调试 -sourcemap webpack配置提供了devtool这个选项,如果设置为 ‘#source-map’,则可以生成.map文件,在chrome浏览器中调试的时候可以显示源 ...
随机推荐
- 强大的jQuery幻灯片播放插件 支持全拼、拖拽和下载等功能
在线演示 本地下载
- 深入理解PHP之:Nginx 与 FPM 的工作机制
网络上有很多关于如何配置 Nginx + FPM 的文章,但它们更多从操作的角度出发,告诉我们怎么做,但却没有告诉我们为什么要这么做,本文从 Nginx 与 FPM 的工作机制出发,探讨配置背后的原理 ...
- 安装配置zabbix代理之zabbix_proxy
配置Proxy代理 如图所示: zabbix_server端在阿里云上,其代理程序部署在各地机房,代理程序收集所在机房的所有机器监控指标,然后传给server端 环境说明: CentOS releas ...
- JQ input标签限制输入数字或字母
<input type="text" maxlength="20" class="input5" onkeyup="val ...
- Spring Boot集成Redis实现缓存机制【从零开始学Spring Boot】
转自:https://blog.csdn.net/linxingliang/article/details/52263763 spring boot 自学笔记(三) Redis集成—RedisTemp ...
- Maven到底是个啥玩意
Maven,是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 上面是百度百科对Maven的正式介绍,如果你是Maven初学者,我估计你看完之后心中肯 ...
- HttpClient for .NET 4.0
Install-Package Microsoft.Net.Http -Version 2.2.29
- C++(十七) — 宏代码、内联函数
1.C++ 表达式返回值 返回引用:当函数返回引用类型时,没有复制返回值.相反,返回的是对象本身.(与之对应的C语言中,返回的是变量的值) C++中,表达式返回的是变量本身(也就是变量对应的地址). ...
- AtCoder Regular Contest 079
C题,刚开始以为遍历整个树,后来发现二重循环判断就行了 #include<map> #include<set> #include<cmath> #include&l ...
- 【总结】对异步处理的http接口进行性能测试
以前对接口做性能测试,接口都是同步处理的,请求之后等待响应结果就知道处理结果了,这样只要看这个接口是否异常,如果无异常无报错记录这个接口的响应时间.TPS等性能指标进行分析就可以了,最近在工作中遇到了 ...