项目中有一个需求:

所有页面引用了一个公共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 公共模块打包,怎么抽取出来一个需要经常修改的包的更多相关文章

  1. jsp公共头信息的抽取(相对路径的修改)

    1,抽取出的公共头信息 <%@ page language="java" contentType="text/html; charset=UTF-8" p ...

  2. 谈谈CommonsChunkPlugin抽取公共模块

    引言 webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分,具体的用法就不做过多介绍,不太了解可以参考webpack官网介绍: 该插件是we ...

  3. Maven之多模块打包成一个jar包及assembly

    一.多模块打包 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  4. Spirng boot maven多模块打包不踩坑

    本文参考 https://blog.csdn.net/Ser_Bad/article/details/78433340 经过实战一次通过.回话不多说,话费不多说,直接上图. 项目整体结构: 父模块: ...

  5. 一份关于webpack2和模块打包的新手指南(二)

    插件 我们已经看到一个内置的webpack插件的例子,在npm run build脚本中调用的webpack -p命令就是使用webpack附带的UglifyJsPlugin插件以生产模式压缩打包文件 ...

  6. 浅谈Webpack模块打包工具一

    为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁  开发阶段把散的模块打包成一个模块 解决网络请 ...

  7. Webpack - CommonJs & AMD 模块打包器

    Webpack 是一个 CommonJs & AMD 模块打包器.可以把你的 JavaScript 代码分离为多个包,在需要的时候进行加载,支持预处理文件,例如 json, jade, cof ...

  8. js模块化/js模块加载器/js模块打包器

    之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...

  9. 一份关于webpack2和模块打包的新手指南

    webpack已成为现代Web开发中最重要的工具之一.它是一个用于JavaScript的模块打包工具,但是它也可以转换所有的前端资源,例如HTML和CSS,甚至是图片.它可以让你更好地控制应用程序所产 ...

随机推荐

  1. umask 默认权限控制和特殊权限

    权限简单介绍: 在Linux中,创建目录或者文件之后总会有默认的权限.共9个,分为三组.分别代表u.g.o(属主.属组.其他用户).r.w.x 也代表各自的权限. r:读   在文件中的权限代表次文件 ...

  2. plotly之set_credentials_file问题

    相信了解可视化的同学们都听说过plotly,笔者也是第一次了解这个网站,然后兴冲冲地设置,但是没想到第一次进行在线账号初始化就出现了问题! python3报错为module 'plotly.tools ...

  3. Vue系列:为不同页面设置body背景颜色

    由于SPA页面的特性,传统的设置 body 背景色的方法并不通用. 解决方案:利用组件内的路由实现 代码参考如下

  4. 每个程序员都可以「懂」一点 Linux

    提到 Linux,作为程序员来说一定都不陌生.但如果说到「懂」Linux,可能就没有那么多人有把握了.到底用 Linux 离懂 Linux 有多远?如果决定学习 Linux,应该怎么开始?要学到什么程 ...

  5. maven3实战之仓库

    maven3实战之仓库(maven仓库分类) maven3实战之仓库(maven仓库分类) ---------- 对于maven来说,仓库只分为两类:本地仓库和远程仓库.当maven根据坐标寻找构件的 ...

  6. Opengl_入门学习分享和记录_番外篇00(MacOS上如何给Xcode 适配openGL)

    现在前面的废话:哇这次没有鸽太久,突然想起来还没有介绍如何适配opengl的衍生库.今天一并介绍下,同样看时间允不允许,让我再把之前学到的一些东西再次总结一遍. 正文开始: 首先大家要知道我们的Ope ...

  7. 以股票案例入门基于SVM的机器学习

    SVM是Support Vector Machine的缩写,中文叫支持向量机,通过它可以对样本数据进行分类.以股票为例,SVM能根据若干特征样本数据,把待预测的目标结果划分成“涨”和”跌”两种,从而实 ...

  8. Linux配置及指令

    目录 Linux配置及指令 一.linux中常用软件的安装 二.主机名和网络 1.修改主机名 2.设置网络 三.关闭防火墙 1.检查防火墙是否开启 2.清除策略 3.永久关闭第一个防火墙 4.关闭第二 ...

  9. net core Webapi基础工程搭建(七)——小试AOP及常规测试_Part 1

    目录 前言 拦截器 异常拦截器 测试结果 身份验证拦截器 测试 小结 补充 2019-07-31 前言 一天天不知道怎么过的,但确实挺忙,事赶事不带停那种,让我感觉跟在流水线干活一样,忙活的事差不多了 ...

  10. 深入浅出TCP与UDP协议

    深入浅出TCP与UDP协议 网络协议是每个前端工程师的必修课,TCP/IP协议族是一系列网络协议的总和,而其中两个具有代表性的传输层协议,分别是TCP与UDP,本文将介绍这两者以及他们之间的区别. 一 ...