使用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 ...
随机推荐
- IDEA 2019注册码(2020年4月过期)
IDEA 2019注册码(2020年4月过期) 812LFWMRSH-eyJsaWNlbnNlSWQiOiI4MTJMRldNUlNIIiwibGljZW5zZWVOYW1lIjoi5q2j54mII ...
- 说一说switch关键字的奥秘
Switch语法 switch作为Java内置关键字,却在项目中真正使用的比较少.关于switch,还是有那么一些奥秘的. 要什么switch,我有if-else 确实,项目中使用switch比较少的 ...
- skywalking集群部署
1.需求:有两台服务器分别装了app,对这些app进行性能监控 三台服务器:10.10.20.198作为服务端展示性能数据,10.10.20.64客户端,装btam系统,10.10.20.63客户端装 ...
- 以Integer类型传参值不变来理解Java值传参
最近在写代码的时候出了一个错误,由于对值引用理解的不深,将Integer传入方法中修改,以为传入后直接修改Integer中的值就不用写返回值接收了,虽然很快发现了问题,但还是来总结一下 首先是代码: ...
- iTextSharp生成pdf含模板(二)---C#代码部分
参考地址:https://www.cnblogs.com/ibeisha/p/itextsharp-pdf.html 一.先在程序中使用Nuget安装iTextSharp(我是创建的控制台程序) 二. ...
- python 变量作用域、闭包
先看一个问题: 下面代码输出的结果是0,换句话说,这个fucn2虽然已经用global声明了variable1,但还是没有改变变量的值 def func1(): variable1=0 def fun ...
- Vue.js项目实战-打造线上商城
首先上一下完成后的效果: 首页: 商品详情页: 购物车页(其实还有个订单页,只是和购物车页基本类似,所以就不截图啦): 开始项目: 由于涉及的是前后端分离,所以我们的后台数据就模拟存储于浏览器端(co ...
- Mybatis一对一,一对多,多对多代码
一对一 <!-- 关系映射 --> <!-- 1-1:自动映射 --> <select id="oneToOne" resultType=" ...
- netty框架概述
概述 最近在学习netty的相关知识,也在看netty的源码,光看不练假把式,所以也正好利用自己学习的机会写几篇netty的分析文章,主要还是一些源码解析的文章,一方面有输出会促使自己在看源码,学习原 ...
- nginx之旅(第一篇):nginx下载安装、nginx启动与关闭、nginx配置文件详解、nginx默认网站
一.nginx下载安装 版本nginx 1.15.5 系统环境centos7.5(本机ip192.168.199.228) 关闭selinux 和防火墙firewall 1.下载 wget http: ...