webpack4实现不同的导出类型
webpack最基本的配置就是导出一个静态的对象，但是由于我们业务比较复杂，往往需要动态配置webpack以构建目标代码。
幸运的是，webpack为我们提供了动态配置webpack文件的支持。
下面介绍一下webpack的多种配置类型。
1、导出为一个对象（Object）
webpack最常见的配置类型为导出一个对象，即
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
2、导出为一个函数（Function）
很明显，导出为一个对象缺乏灵活性。若我们想要根据不同的开发环境构建不一样的代码。此时，webpack配置也应该随着改变。
所以，webpack支持我们导出一个函数，这个导出函数的默认参数为env和argv。其中，env为环境对象，我们可以通过命令行对其进行配置（webpack可自动读取该配置），argv为命令行输入参数的map。
（1）--env 参数支持各种各样的配置：
| Invocation | Resulting environment | notes |
|---|---|---|
| webpack --env prod | "prod" | env为String类型，赋值为prod |
| webpack --env.prod | { prod: true } | env为对象，prod是对象的属性， 默认为true |
| webpack --env.prod=1 | { prod: 1 } | env为对象，prod是对象的属性，赋值为1 |
| webpack --env.prod=foo | { prod: "foo" } | env为对象，prod是对象的属性，赋值为foo |
| webpack --env.prod --env.min | [ prod: true, min: true ] | env为对象，prod和min是对象的属性，默认为true。--env命令可以多次使用，不会被覆盖 |
| webpack --env.prod --env min | [{ prod: true }, "min"] | env 为数组，第一个数组元素为对象，prod是其属性，默认为true。第二个数组元素为String，赋值为min |
| webpack --env.prod=foo --env.prod=bar | { prod: ["foo", "bar"] } | env为对象，prod是对象的属性。prod是一个数组，第一个数组元素为"foo",第二个数组对象为"bar"。注意，即使这种情况下，prod值不会被覆盖，而是转化为数组。 |
（2）argv为webpack命令行参数的map。
例如，我们在命令行键入webpack --entry-filename=index,则在webpack配置文件中，我们可以通过argv["entry-filename"]来获取命令行配置的值。即：
argv["entry-filename"] === "index"
（3）举个例子：
const path = require('path')
module.exports = function (env, argv) {
return {
entry: './src/' + argv['entry-filename'] + '.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devtool: env.prod ? 'source-map' : 'eval'
}
}
在命令行中，我们需要自键入
webpack --env.prod --entry-filename=index
注意，凡是webpack配置文件中使用到的命令行参数，例如argv["entry-filename"]，均需要在命令行传入，一个不能遗漏，否则webpack会报错：Config did not export an object
3、导出为一个Promise对象
除了导出为一个函数，webpack还支持我们异步获取配置变量来配置相关文件。（真是很强大！）
为了体现异步获取数据的过程，我们把webpack.config.js修改为以下内容：
const path = require('path')
module.exports = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
})
}, 1000)
})
}
4、导出多个配置
修改webpack.config.js的内容如下：
const path = require('path')
module.exports = [
{
name: 'index',
entry: './src/index.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'production'
},
{
name: 'main',
entry: './src/main.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
}
]
当我们运行webpack时，以上多个配置都会被构建出来。如果我们只想构建其中一份代码，那么只需要传入--config-name参数即可：
webpack --config-name=index
webpack --config-name=main
如上所示，我们可以分别构建出name为index、name为main的配置对象所配置的内容。
以上配置常见的场景有：npm包利用不同的模块语法构建不同的输出文件，供不同的项目进行使用：
module.exports = [{
output: {
filename: './dist-amd.js',
libraryTarget: 'amd'
},
name: 'amd',
entry: './app.js',
mode: 'production',
},{
output: {
filename: './dist-commonjs.js',
libraryTarget: 'commonjs'
},
name: 'commonjs',
entry: './app.js',
mode: 'production',
}]
总而言之，webpack为我们提供了众多灵活的配置解决方案。当我们遇到复杂项目的时候，只要明确心中需求，大多数都能够找到对应的解决方案。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
![JS实现留言板功能[楼层效果展示]](//img.jbzj.com/images/xgimg/bcimg0.png)
小编最近在基于js实现留言板功能，实现的功能有发布人和发布内容做非空校验，楼层效果展示和发布时间展示。具体实例代码大家参考下本文2017-12-12
类型检查是一种静态分析的过程，用于验证变量、函数和表达式的类型是否符合预期，这篇文章主要来和大家聊聊TypeScript中类型检查与错误捕获的相关知识，希望对大家有所帮助2023-06-06
这篇文章主要介绍了微信小程序HTTP接口请求封装代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
本文给大家介绍使用BootStrap实现用户登录界面UI，布局风格采用左右各一半的风格设计，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-08-08
这篇文章主要介绍了js结合正则实现国内手机号段校验的方法以及使用js和jQuery实现的简单校验手机号的示例，非常简单实用，有需要的小伙伴可以参考下。2015-06-06
本篇文章主要是对利用js动态添加删除table行的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
本文通过实例代码给大家详细介绍了js闭包的几种常见形式，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下2017-09-09
本文给大家介绍iframe中子父类窗口调用JS的方法及注意事项，介绍的超详细，需要的朋友快来学习下2015-08-08
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值,下面这篇文章主要给大家介绍了关于js知识点总结之getComputedStyle用法的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了基于JavaScript实现跳转提示页面 的相关资料,需要的朋友可以参考下2016-09-09
![JS实现留言板功能[楼层效果展示]](http://img.jbzj.com/images/xgimg/bcimg0.png)
最新评论