共计 2720 个字符，预计需要花费 7 分钟才能阅读完成。
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 为我们提供了众多灵活的配置解决方案。当我们遇到复杂项目的时候，只要明确心中需求，大多数都能够找到对应的解决方案。
