使用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 ...
随机推荐
- ant-design-pro引用css
ant-design-pro中默认只能引用less文件,引用了css文件也是无效的.所以需要在配置文件config.js中找到 cssLoaderOptions,在 getLocalIdent中加入 ...
- tk.mybatis 中一直报...table doesn't exists
首先检查你在实体类中可有加上@Table(name="数据库中的表名") 第二:如果你加了@Table注解, 那么只有一种可能就是.xml中定义了与通用mapper中的相同的方法名 ...
- Appium+python自动化(一)- 环境搭建—上(超详解)
简介 今天是高考各地由于降水,特别糟糕,各位考生高考加油,全国人民端午节快乐.最近整理了一下自动化的东西,先前整理的python接口自动化已经接近尾声.即将要开启新的征程和篇章(Appium& ...
- Java8 Optional总结
分类专栏: Java 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/HEYUTAO00 ...
- C#通过字符串分割字符串Split
string[] strArr = str.Split(new[] {"****==="},StringSplitOptions.None); 更多内容关注公众号 洛水梅家
- python 练习题:请利用Python内置的hex()函数把一个整数转换成十六进制表示的字符串
# -*- coding: utf-8 -*- # 请利用Python内置的hex()函数把一个整数转换成十六进制表示的字符串 n1 = 255 n2 = 1000 print(hex(n1)) pr ...
- c#多个按钮执行同一类事件-按钮按下和弹起
首先在Winform中添加一个Button控件,在属性里面为控件添加鼠标按下和弹起事件(不要双击按钮,在属性里面添加) 再添加其他几个按钮控件,在控件的属性里面为鼠标按下和弹起添加已定义好处理函数(M ...
- $.ajax()方法
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...
- Asp.net MVC企业级开发(02)---Log4net
Log4Net 是用来记录日志的,可以将程序运行过程中的信息输出到一些地方(文件.数据库.EventLog等).日志就是程序的“黑匣子”,可以通过日志查看系统的运行过程,从而发现系统的问题. 日志的作 ...
- 《EOPL》: 实现了惰性求值的两种参数传递策略
call-by-need 不过是比 call-by-name 多了一个 memorization 的步骤