webpack4实现不同的导出类型

2024-05-06 16:49:42

字体：大中小

来源：转载

供稿：网友

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：基于three.js实现的3D粒子动效实例代码

下一篇：使用Three.js实现太阳系八大行星的自转公转示例代码