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 相关文章推荐
jquery随意添加移除html的实现代码
Jun 21 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
Vue组件开发初探
Feb 14 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
Javascript如何实现扩充基本类型
Aug 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
laypage.js分页插件使用方法详解
2019/07/27 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
python正则分组的应用
2013/11/10 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
我就是这样学习Python中的列表
2019/06/02 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
校长先进事迹材料
2014/02/01 职场文书
竞争上岗实施方案
2014/03/21 职场文书
JS数组的常用方法整理
2021/03/31 Javascript