在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提供公共代码的更多相关文章

  1. [转] 用webpack的CommonsChunkPlugin提取公共代码的3种方式

    方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...

  2. 详解用webpack的CommonsChunkPlugin提取公共代码的3种方式(注意webpack4.0版本已不存在)

    Webpack 的 CommonsChunkPlugin 插件,负责将多次被使用的 JS 模块打包在一起. CommonsChunkPlugin 能解决的问题 在使用插件前,考虑几个问题: 对哪些 c ...

  3. webpack CommonsChunkPlugin 提取公共代码

    1.项目结构 2.部分代码 module.js console.log('module.js'); index文件夹下的index.js require('../module.js'); consol ...

  4. webpack.optimize.CommonsChunkPlugin插件的使用

    方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin('common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...

  5. 关于webpack.optimize.CommonsChunkPlugin的使用二

    Note:当有多个入口节点的时候,只有所有入口节点都引入了同一个模块的时候,webpack.optimize.CommonsChunkPlugin才会将那个模块提取出来,如果其中一个入口节点没有引入该 ...

  6. webpack学习笔记--提取公共代码

    为什么需要提取公共代码 大型网站通常会由多个页面组成,每个页面都是一个独立的单页应用. 但由于所有页面都采用同样的技术栈,以及使用同一套样式代码,这导致这些页面之间有很多相同的代码. 如果每个页面的代 ...

  7. webpack.optimize.CommonsChunkPlugin

    打包第三方控件:比如jquery,angular,bootstrap.... const CommonsChunkPlugin = require("webpack/lib/optimize ...

  8. webpack散记---提取公共代码

    (1)作用: 减少代码冗余 提高加载速度 (2)来源 commonsChunkPlugin webpack.optimize.CommonsChunkPlugin (3)配置 { plugins:[ ...

  9. webpack 多页面支持 & 公共组件单独打包

    webpack - 多页面/入口支持 & 公共组件单独打包 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 we ...

随机推荐

  1. git本地代码管理

    git真的是一个代码管理神器,帮助我们在代码开发过程中更好的进行版本管理,如果没有版本管理器,就要不停的复制粘贴,一个项目开发下来,一堆的版本文件夹,最后都不知道是哪个版本了. 用git之后,每一次的 ...

  2. 并行 Webclient(一)

    在 Stackoverflow 上看到了一个提问,关于并行的 WebClient,觉得回答者的代码很有参考性,下面记录一下,以便日后用到: 提问者: 我有一个功能基本上分为两个子功能. html=Re ...

  3. jmeter 如何获取一小时之前的时间戳

    正确答案: ${__intSum(${__time(/1000,)},-3600,)} 如果还要显示毫秒 ${__longSum(${__time},-3600000,)}

  4. KVM 学习笔记

    查看虚拟化环境 (1)查看虚拟机环境 (2)查看kvm模块支持 (3)查看虚拟工具版本 (4)查看网桥

  5. mysql启动时出现ERROR 2003问题的解决方法

    目录 写在前面 问题描述 分析原因 问题解决 写在前面 今天,在打开Navicat Permium 链接MySQL 的时候出现Error 2003 的错误. 遂记录产生的原因以及解决方法. 问题描述 ...

  6. 关于 Visual Studio 2017 ,或2019 ,Installer 没检测到已安装的程序.以及C++ 创建项目失败

    解决方法: 首先, 把 本机 的Installer.exe 卸载了. 2 , 重新下载 Installer.exe 打开后发现 ,又重新检测到 VS 2019 ,或2017了

  7. Power BI连接Oracle的注意事项

    开始 Power BI 连接Oracle需要安装对应位数的ODAC,这个过程中有几个点要注意. ODAC 12c.x 版本(32.64),在安装时要将GAC的勾搭上.否则打开Power BI时会提示找 ...

  8. contos7自启动django服务

    研究了很多种办法 1.新建一个sh 文件 vi django_autostart.sh 2.编辑文件内容 #!/bin/bash #chkconfig:345 61 61 //此行的345参数表示,在 ...

  9. 关于C++中使用++it还是it++的问题

    我们经常使用for循环来遍历东西,循环变量可以前自增也可以后自增,发现对遍历结果没啥影响,但是该如何选择呢? 我们应该尽量使用前自增运算符而不是后自增运算符,即用 ++ Iter 代替 Iter++ ...

  10. i春秋——“百度杯”CTF比赛 十月场——Not Found(http请求方法,client-ip伪造ip)

    这道题也是让我很迷... 打开就是not found,让我一度以为是服务器挂了,细看发现有个404.php 访问也没发现什么东西,只有来自出题人的嘲讽 haha~ 不过在首页的header中发现个奇怪 ...