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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
解密效果
2006/06/23 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
python中argparse模块用法实例详解
2015/06/03 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python OpenCV获取视频的方法
2018/02/28 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
Django获取应用下的所有models的例子
2019/08/30 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
中专毕业生自荐信范文
2013/11/28 职场文书
迟到检讨书大全
2014/01/25 职场文书
文员求职信
2014/07/15 职场文书
护理目标管理责任书
2014/07/25 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android