webpack4实现不同的导出类型


Posted in Javascript onApril 09, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
JQuery教学之性能优化
May 14 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
vue如何判断dom的class
Apr 26 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 #Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 #Javascript
Koa 中的错误处理解析
Apr 09 #Javascript
简单说说如何使用vue-router插件的方法
Apr 08 #Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 #Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 #Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 #Javascript
You might like
PHP中的float类型使用说明
2010/07/27 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
domReady的实现案例
2016/11/23 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
使用Pycharm分段执行代码
2020/04/15 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
党员培训思想汇报
2014/01/07 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
爱护公共设施的标语
2014/06/24 职场文书
公务员政审材料
2014/12/23 职场文书
导游词怎么写
2015/02/04 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏