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 参数支持各种各样的配置:

InvocationResulting environmentnotes
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为我们提供了众多灵活的配置解决方案。当我们遇到复杂项目的时候,只要明确心中需求,大多数都能够找到对应的解决方案。

以上是 webpack4实现不同的导出类型 的全部内容, 来源链接: utcz.com/z/318652.html

回到顶部