使用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 ...
随机推荐
- 【题解】C2Crni - Crni [COCI2010] [SP7884]
[题解]C2Crni - Crni [COCI2010] [SP7884] 传送门:\(\text{C2Crni - Crni}\) \(\text{[COCI2010]}\) \(\text{[SP ...
- go ---MQTT client
Paho GO Client 语言 GO 协议 EPL AND EDL 官网地址 http://www.eclipse.org/paho/ API类型 Asynchronous 描述 Paho ...
- 使用Net Mail发送邮件
最近用到了发送邮件这个功能,简单记录一下案例.代码如下: using System; using System.Collections.Generic; using System.Linq; usin ...
- 让你的 vs code 跑在云上,用手机浏览器就能写代码
让你的vs code 跑在云服务器上 在B站上看到一个视频Run VS Code in the browser with massive computing resources(教你如何配置一个云ID ...
- NetCoreApi框架搭建(二、Nlog使用配置)
本文只配置了简单文件存储 1.添加nuget包 2.添加日志配置文件nlog.config 这里配置了三个target区分不同的日志,具体配置需要自己研究,推荐链接https://www.cnblog ...
- Windows怎么安装配置Elasticsearch
进入Elasticsearch官网,点击Download,Elasticsearch默认端口9200 然后进入下图:有各种版本,我选择windows版本 下载之后,解压得到Elasticsearch文 ...
- Qt keyevent学习笔记
在按下一个键不放后,会发生: 1.触发keypressevent(),此时isautorepeat()返回false: 2.set isautorepeat(),使其返回值为true; 3.触发key ...
- 踩坑ios H5
目录 input获取焦点时,页面被放大 ios input输入时白屏 软键盘撑起页面下不来 ios页面滚动不流畅 position:fixed/absolute随屏幕滚动 1.input获取焦点时,页 ...
- thinkphp路由配置route.php
路由设置配置 打开route.php 引入Route控制器类(use think\Route;) 设置路由--> Route::rule('路由表达式','路由地址','请求类型','路由参 ...
- 你家的APS系统有这些功能吗?排程系统功能盘点
随着企业规模不断扩大,在经营管理方面会面临各种各样的问题,为了帮助解决此类问题,很多公司都会引入APS高级排程系统帮助进行生产管理的优化. APS系统针对的管理目标是 改善库存控制,大幅降低原料与中间 ...