项目中有一个需求:

所有页面引用了一个公共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. 深入理解JVM-类加载器深入解析(2)

    深入理解JVM-类加载器深入解析(2) 加载:就是把二进制形式的java类型读入java虚拟机中 连接: 验证: 准备:为类变量分配内存,设置默认值.但是在到达初始化之前,类变量都没有初始化为真正的初 ...

  2. myeclipse中从svn下载的web工程,到工作空间却显示成Java工程

    转载自:https://blog.csdn.net/u011217058/article/details/57970587 右键工程,properties-> Project Facets-&g ...

  3. L4170[CQOI2007]涂色

    #include <bits/stdc++.h> using namespace std; #define rep(i, a, b) for (int i = a; i <= b; ...

  4. 【0725 | Day 1】计算机编程/计算机组成原理/计算机操作系统

    什么是编程 编程语言:人与计算机交流的手段 编程:通过编程语言编写文件 学习编程的目的:让计算机代替人力,为我们服务 计算机组成原理 计算机由五大部分组成:控制器.运算器.存储器.输入设备.输出设备. ...

  5. let 、const 、var、function声明关键字的新理解

    今天在群里看到大佬们讨论let .const 的提升问题,有个大佬问  三种声明都在什么阶段提升?  什么阶段?这个真不清楚,以前是只知道let.const存在死区,没有变量提升,一下子就懵了 后经手 ...

  6. ABP 配置全局数据过滤器 II

    第一篇 那种写法有些复杂, 简单办法是直接注入 切换到 ***.EntityFramework 项目 在Uow 里面创建 ***EfUnitOfWork.cs 类 public class Coope ...

  7. idea打开eclipse项目并部署至tomcat

    前言:因为遇到了用idea打开eclipse项目并配置外置tomact的场景,经过实验也成功了,所以特地来记录一下. 导入eclipse项目 这里我们导入的eclipse下开发的maven项目,直接点 ...

  8. Java 8 为什么会引入lambda 表达式?

    Java 8 为什么会引入lambda ? 在Java8出现之前,如果你想传递一段代码到另一个方法里是很不方便的.你几乎不可能将代码块到处传递,因为Java是一个面向对象的语言,因此你要构建一个属于某 ...

  9. Dubbo(一):Dubbo运行原理

    前言: 在开始入门Javaweb时,学的基本都是MVC开发模式,一个项目基本上就是model,view,controller三层.但是随着系统的服务逐渐加多,SOA模式更加适合目前项目开发.而SOA模 ...

  10. poium测试库之JavaScript API封装原理

    poium一直我在维护的一个开源项目,它的定位是以极简的方式在自动化项目中Page Objects设计模式.我在之前的文章中也有介绍. 本篇文章主要介绍一个JavaScript元素操作的封装原理. 为 ...