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,甚至是图片.它可以让你更好地控制应用程序所产 ...
随机推荐
- Educational Codeforces Round 70 (Rated for Div. 2)
这次真的好难...... 我这个绿名蒟蒻真的要崩溃了555... 我第二题就不会写...... 暴力搜索MLE得飞起. 好像用到最短路?然而我并没有学过,看来这个知识点又要学. 后面的题目赛中都没看, ...
- 2019牛客多校训练第三场H.Magic Line(思维)
题目传送门 大致题意: 输入测试用例个数T,输入点的个数n(n为偶数),再分别输入n个不同的点的坐标,要求输出四个整数x1,y1,x2,y2,表示有一条经过点(x1,y1),(x2,y2)的直线将该二 ...
- css实现左边高度自适应右边高度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 【0812 | Day 13】闭包函数/装饰器/迭代器
目录 闭包函数 无参装饰器 有参装饰器 迭代器 闭包函数 一.什么是闭包? 闭包指的是:函数内部函数对外部作用域而非全局作用域的引用. def outter(): x = 1 def inner(): ...
- sql server数据库查询链接服务器
服务器对象->链接服务器: 或者 select * from sys.servers: 找到服务器对象名称 select * from [服务器对象名称].[数据库名称].dbo.[表名]:
- (三十)c#Winform自定义控件-文本框(三)
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...
- 从 Python 之父的对话聊起,关于知识产权、知识共享与文章翻译
一.缘起 前不久,我在翻译 Guido van Rossum(Python之父)的文章时,给他留言,申请非商业用途的翻译授权. 过程中起了点小误会,略去不表,最终的结果是:他的文章以CC BY-NC- ...
- linux常用命令示例汇总
1.ping -c 3 -i 0.1 -W 1 -t 3 100.100.242.181 -c发包数目,-c 3三个 -i,发包间隔,-i 0.1,每隔0.1秒发一个包 -W,发包超时时间,-W 1, ...
- SpringBoot进阶教程(六十一)intellij idea project下建多个module搭建架构(下)
在上一篇文章<SpringBoot进阶教程(六十)intellij idea project下建多个module(上)>中,我们已经介绍了在intellij idea中创建project之 ...
- mybatis 源码分析(四)一二级缓存分析
本篇博客主要讲了 mybatis 一二级缓存的构成,以及一些容易出错地方的示例分析: 一.mybatis 缓存体系 mybatis 的一二级缓存体系大致如下: 首先当一二级缓存同时开启的时候,首先命中 ...