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' }}
新闻热点
疑难解答
图片精选