webpack4 公共模块打包,怎么抽取出来一个需要经常修改的包
项目中有一个需求:
所有页面引用了一个公共ad.js 因为广告需要不断投放新渠道,所以ad.js需要经常上线更新,这样会导致打包出来的
commons.js经常更新,缓存一下无效了.所以急需将ad.js抽取出来,自己打包成一个JS
现在入口定义
entry['ad'] = path.resolve(dirlets.libsDir, 'ad.channel.js')
插件代码设置为:
new webpack.optimize.SplitChunksPlugin({
chunks: 'all',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '-',
name: true,
cacheGroups: {
'ad': {
name: 'ad',
test: path.resolve(dirlets.libsDir, 'ad.channel.js'),
minChunks: 8,
maxInitialRequests: 5,
minSize: 0,
priority: 2,
},
commons: {
name: 'commons',
minChunks: 8,
maxInitialRequests: 5,
minSize: 0,
priority: 1,
},
}
}),
test设置很重要:可以设置正则,字符串,用来将匹配到的文件打包出来.
可以参考这个链接.https://juejin.im/post/5af15e895188256715479a9a
priority这个设置是我不断尝试后发现的.
如果不设置这个属性的话,后边commons打包的JS会包含ad chunk打包出来的包.这样就重复无意义了.
但是将commons的priority优先级设置比ad的priority数值低的话.打包出来的就不会包含了.
以上2个配置缺一不可.多次尝试后发现的.
webpack4 公共模块打包,怎么抽取出来一个需要经常修改的包的更多相关文章
- jsp公共头信息的抽取(相对路径的修改)
1,抽取出的公共头信息 <%@ page language="java" contentType="text/html; charset=UTF-8" p ...
- 谈谈CommonsChunkPlugin抽取公共模块
引言 webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分,具体的用法就不做过多介绍,不太了解可以参考webpack官网介绍: 该插件是we ...
- Maven之多模块打包成一个jar包及assembly
一.多模块打包 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...
- Spirng boot maven多模块打包不踩坑
本文参考 https://blog.csdn.net/Ser_Bad/article/details/78433340 经过实战一次通过.回话不多说,话费不多说,直接上图. 项目整体结构: 父模块: ...
- 一份关于webpack2和模块打包的新手指南(二)
插件 我们已经看到一个内置的webpack插件的例子,在npm run build脚本中调用的webpack -p命令就是使用webpack附带的UglifyJsPlugin插件以生产模式压缩打包文件 ...
- 浅谈Webpack模块打包工具一
为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁 开发阶段把散的模块打包成一个模块 解决网络请 ...
- Webpack - CommonJs & AMD 模块打包器
Webpack 是一个 CommonJs & AMD 模块打包器.可以把你的 JavaScript 代码分离为多个包,在需要的时候进行加载,支持预处理文件,例如 json, jade, cof ...
- js模块化/js模块加载器/js模块打包器
之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...
- 一份关于webpack2和模块打包的新手指南
webpack已成为现代Web开发中最重要的工具之一.它是一个用于JavaScript的模块打包工具,但是它也可以转换所有的前端资源,例如HTML和CSS,甚至是图片.它可以让你更好地控制应用程序所产 ...
随机推荐
- Linux命令- echo、grep 、重定向、1>&2、2>&1的介绍
最近笔试遇到一道题,关于Linux命令的,题目如下 下面两条命令分别会有怎样的输出 echo hello 1>&2 |grep aaa echo hello 2>&1 ...
- Micropython TPYBoard v102 温湿度短信通知器(基于SIM900A模块)
前言 前段时间看了追龙2,感受就是如果你是冲着追龙1来看追龙2的话,劝你还是不要看了,因为追龙2跟追龙1压根没什么联系,给我的感觉就像是看拆弹专家似的,估计追龙2这个名字就是随便蹭蹭追龙1的热度来的. ...
- 想成为顶尖 Java 程序员?请先过了下面这些技术问题。
一.数据结构与算法基础 说一下几种常见的排序算法和分别的复杂度. 用Java写一个冒泡排序算法 描述一下链式存储结构. 如何遍历一棵二叉树? 倒排一个LinkedList. 用Java写一个递归遍历目 ...
- 页面元素定位-CSS元素基本定位
基本定位 """属性定位 一 """ # #通过id # driver.find_element_by_css_selector(" ...
- go 学习笔记之数组还是切片都没什么不一样
上篇文章中详细介绍了 Go 的基础语言,指出了 Go 和其他主流的编程语言的差异性,比较侧重于语法细节,相信只要稍加记忆就能轻松从已有的编程语言切换到 Go 语言的编程习惯中,尽管这种切换可能并不是特 ...
- Ubuntu 17 安装Chrome浏览器
1.进入下载文件存放目录 cd Downloads 2.下载chrome文件 2.1 32位使用如下命令 wget https://dl.google.com/linux/direct/google- ...
- js-获取屏幕的中各种宽高
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- Git 实用技巧:git stash
我们经常会遇到这样的情况: 正在dev分支开发新功能,做到一半时有人过来反馈一个bug,让马上解决,但是新功能做到了一半你又不想提交,这时就可以使用git stash命令先把当前进度保存起来.然后切换 ...
- Go语言框架:Beego vs Gin 的区别
前言: 一切语言.技术或者框架,本质都是工具,工具的价值在于为使用者提供竞争优势. 一.Beego和Gin全方位比较 MVC Beego支持完整的MVC, Gin不支持完整的MVC(需要开发者自己实现 ...
- Go 语言基础——错误处理
#### 学习目标 掌握错误处理 掌握自定义错误处理 掌握defer关键字的使用 ------ #### 错误处理 GO没有异常处理机制 Go语言引入了一个关于错误处理的标准模式,即error接口,该 ...