使用webpack.optimize.CommonsChunkPlugin提供公共代码
在webpack4里使用webpack.optimize.CommonsChunkPlugin时,报错,webpack4删除了常用的 CommonsChunkPlugin ,提示我们用config.optimization.splitChunks这个,
但是改成这个之后还是报错“TypeError: Cannot read property 'splitChunks' of undefined”
后面搜索找到了个解决办法:
config.entry = {
app:path.join(__dirname,'src/index.js'),
vendor:['vue']
}
config.optimization = {
splitChunks: {
cacheGroups: {// 这里开始设置缓存的 chunks
commons: {
chunks: 'initial',// 必须三选一: "initial" | "all"(默认就是all) | "async"
minChunks: 2,// 最小 chunk ,默认1
maxInitialRequests: 5,// 最大初始化请求书,默认1
minSize: 0 // 最小尺寸,默认0
},
vendor: {// key 为entry中定义的 入口名称
test: /node_modules/,// 正则规则验证,如果符合就提取 chunk
chunks: 'initial',
name: 'vendor',// 要缓存的 分隔出来的 chunk 名称
priority: 10,// 缓存组优先级
enforce: true
}
}
},
runtimeChunk: true
}
具体webpack4版本特性,可以翻阅以下文章:
https://github.com/webpack/webpack/releases,
https://zhuanlan.zhihu.com/p/34028750,
http://ju.outofmemory.cn/entry/343762
使用webpack.optimize.CommonsChunkPlugin提供公共代码的更多相关文章
- [转] 用webpack的CommonsChunkPlugin提取公共代码的3种方式
方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...
- 详解用webpack的CommonsChunkPlugin提取公共代码的3种方式(注意webpack4.0版本已不存在)
Webpack 的 CommonsChunkPlugin 插件,负责将多次被使用的 JS 模块打包在一起. CommonsChunkPlugin 能解决的问题 在使用插件前,考虑几个问题: 对哪些 c ...
- webpack CommonsChunkPlugin 提取公共代码
1.项目结构 2.部分代码 module.js console.log('module.js'); index文件夹下的index.js require('../module.js'); consol ...
- webpack.optimize.CommonsChunkPlugin插件的使用
方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin('common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...
- 关于webpack.optimize.CommonsChunkPlugin的使用二
Note:当有多个入口节点的时候,只有所有入口节点都引入了同一个模块的时候,webpack.optimize.CommonsChunkPlugin才会将那个模块提取出来,如果其中一个入口节点没有引入该 ...
- webpack学习笔记--提取公共代码
为什么需要提取公共代码 大型网站通常会由多个页面组成,每个页面都是一个独立的单页应用. 但由于所有页面都采用同样的技术栈,以及使用同一套样式代码,这导致这些页面之间有很多相同的代码. 如果每个页面的代 ...
- webpack.optimize.CommonsChunkPlugin
打包第三方控件:比如jquery,angular,bootstrap.... const CommonsChunkPlugin = require("webpack/lib/optimize ...
- webpack散记---提取公共代码
(1)作用: 减少代码冗余 提高加载速度 (2)来源 commonsChunkPlugin webpack.optimize.CommonsChunkPlugin (3)配置 { plugins:[ ...
- webpack 多页面支持 & 公共组件单独打包
webpack - 多页面/入口支持 & 公共组件单独打包 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 we ...
随机推荐
- [转帖]PostgreSQL的时间/日期函数使用
PostgreSQL的时间/日期函数使用 https://www.cnblogs.com/mchina/archive/2013/04/15/3010418.html 这个博客的 文章目录比上一个好十 ...
- vue router 常用操作
1. 普通路由 const routes = [ { path: '/index', component: index } ] 2. 重定向 redirect const routes = [ { ...
- 一个简单的 ValueTask 的示例
Task 确实有潜在的缺点,特别是对于实例创建很多 并且高吞吐量和性能是关键问题的场景 : Task 是一个类.作为一个类,这意味着任何需要创建一个对象的操作都需要分配一个对象,分配的对象越多, ...
- 【BZOJ3328】PYXFIB(单位根反演,矩阵快速幂)
[BZOJ3328]PYXFIB(单位根反演,矩阵快速幂) 题面 BZOJ 题解 首先要求的式子是:\(\displaystyle \sum_{i=0}^n [k|i]{n\choose i}f_i\ ...
- eclipse使用maven,启动工程tomcat报错:java.lang.ClassNotFoundException: org.springframework.web.context.Contex
maven是个不错的管理jar包工具,但是我们在eclipse使用maven时,总是遇上这样那样的问题,比如今天,我编译工程,启动过后,tomcat报错:java.lang.ClassNotFound ...
- 在Go1.11.1中使用go module管理依赖
今天试验了一下go的版本管理Go moule,只是安装了下,由于目前还没有进行大的项目开发,暂时没有碰到坑. 使用了模块后,可以不用在GOPATH中再建立src目录了,直接在GOPATH中就行 另外, ...
- Python基础10
字符串大小写转换,除了upper,lower,还有一种方法,casefold( ) 方法 比较这两种方法的适用范围
- [转]Java游戏引擎
JME(jMonkey Engine): JME是一个高性能的3D图形API,采用LWJGL作为底层支持.它的后续版本将支持JOGL.JME和Java 3D具有类似的场景结构,开发者必须以树状方式组织 ...
- Mybatis映射文件标签(关于sql)
Mybatis映射文件 1.接口的全限定名和映射文件的namespace一致 <mapper namespace="com.offcn.dao.UserDao"> 2. ...
- 【夯实基础】-浅谈"单点登录"的几种实现方式
单点登录 一.Session跨域 所谓Session跨域就是摒弃了系统提供的Session,而使用自定义的类似Session的机制来保存客户端数据的一种解决方案. 如:通过设置cookie的domai ...