项目中有一个需求:
所有页面引用了一个公共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 IO Scheduler(Linux IO 调度器)
每个块设备或者块设备的分区,都对应有自身的请求队列(request_queue),而每个请求队列都可以选择一个I/O调度器来协调所递交的request.I/O调度器的基本目的是将请求按照它们对应在块设 ...
-
Android生成一维码
BitmapUtil.java里面添加个方法 /** * 用于将给定的内容生成成一维码 注:目前生成内容为中文的话将直接报错,要修改底层jar包的内容 * * @param content 将要生成一 ...
-
bash正则表达式
星号*: 匹配它前面的字符串或正则表达式任意次(包括0次). 比如:* 可能匹配的字符串有:... ...... 句号.: 匹配除换行符之外的任意一个字符. 比如:"112.",将 ...
-
Oozie的安装过程
依赖CDH5,JDK和关系数据库 集群规划 主机名 IP Ooize节点 CHD1 XX.XX.XX.XX oozie server,oozie ...
-
python生成html文件浏览器中文显示乱码问题
近来在网上采集数据,想把采集下来的数据整合成html的形式保存.以便其他的平台产品可以直接读取html显示或者根据html标签提取数据. def output_html(self): try: fou ...
-
TreeSet集合如何保证元素唯一
TreeSet: 1.特点 TreeSet是用来排序的, 可以指定一个顺序, 对象存入之后会按照指定的顺序排列 2.使用方式 a.自然顺序(Comparable) TreeSet类的add()方法中会 ...
-
crm管理系统
开始的时候,我们小组开始先完成各自的静态页面,并实现页面的跳转. //部门主页面 //部门添加页面 //部门修改页面 并通过AJXA发送到后台,后台通过处理方法,并返回到前端. 需要注意的是:在下拉列 ...
-
国内5家云服务厂商 HTTPS 安全性测试横向对比
随着 Chrome.Firefox 等浏览器对 HTTPS 的重视,国内众多云服务厂商都相继提供 SSL 证书申购服务,但是大家有没有注意到一个细节,不同厂家申请的 SSL 证书,由于证书性能.功能差 ...
-
python操作mysql增删查改
# coding=utf-8 ''' python操作mysql,需安装MySQLdb驱动 安装MySQLdb,请访问 http://sourceforge.net/projects/mysql-py ...
-
1.3、Android Studio创建一个Android Library
一个Android Library结构上与Android app模块相同.它可以包含构建一个app需要的所有东西,包括圆满,资源文件和AndroidManifest.xml.然而,并非编译成运行在设备 ...