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浏览器中调试的时候可以显示源 ...
随机推荐
- NFS 安装、管理
NFS简介 NFS允许一个系统在网络上与他人共享目录和文件.通过使用NFS,用户和程序可以像访问本地文件一样访问远程系统上的文件. 安装NFS 服务端安装 NFS安装包:nfs-utils-lib.i ...
- ubuntu+anaconda+python安装各版本tensorflow
一.安装anaconda 1.去官网下载anaconda linux版本即可 选择合适的版本下载即可 2.安装Aanconda: 打开终端(Ctrl+Alt+t)进入到下载的目录一般在home 下的D ...
- jQuery时间轴鼠标悬停动画
在线演示 本地下载
- jQuery 3D垂直多级菜单
在线演示 本地下载
- 【Java并发】Java中的原子操作类
综述 JDK从1.5开始提供了java.util.concurrent.atomic包. 通过包中的原子操作类能够线程安全地更新一个变量. 包含4种类型的原子更新方式:基本类型.数组.引用.对象中字段 ...
- iOS 或者Android调用vue.js 里面的方法
1.原生调用vue.js 某个vue组件下的方法. 比如**.vue里面有个这样的方法: 如果这样的话,在iOS或者Android里面是调用不了这个ajax方法的. 需要在**.vue (我的版本是v ...
- iOS日常学习 - 让你的 Xcode8 继续使用插件
本文转载,原文链接 随着 iOS10 的正式版即将发布,Xcode8 GM 也在发布会后放出,本文不会涉及到 Xcode8 有哪些更新,而是记录了如何让 Xcode8 继续支持 Plugin. 相信各 ...
- Dangling Javadoc comment
Javadoc主要用于对类和方法的注释.Javadoc没有@file和@date的注解.Javadoc has no @file or @date tags. You should be taggin ...
- MySql 查询数据库中所有表名以及对比分布式库中字段和表的不同
查询数据库中所有表名select table_name from information_schema.tables where table_schema='数据库名' and table_type= ...
- geoserver源码maven编译相关问题
1.登陆失败跳转404错误 登陆失败后指向的路径为: http://192.168.15.97:8080/hgisserver/web/wicket/bookmarkable/org.geoserve ...