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 相关文章推荐
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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 作用域解析运算符(::)
2010/07/27 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
JavaScript省市联动实现代码
2014/02/15 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
python操作excel的方法
2018/08/16 Python
python下载微信公众号相关文章
2019/02/26 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
办公室文秘岗位职责
2013/11/15 职场文书
优秀教师事迹简介
2014/02/02 职场文书
战友聚会主持词
2014/04/02 职场文书
学习经验演讲稿
2014/05/10 职场文书
初中学习计划书范文
2014/09/15 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
Python加密与解密模块hashlib与hmac
2022/06/05 Python