在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. [转帖]PostgreSQL的时间/日期函数使用

    PostgreSQL的时间/日期函数使用 https://www.cnblogs.com/mchina/archive/2013/04/15/3010418.html 这个博客的 文章目录比上一个好十 ...

  2. vue router 常用操作

    1.  普通路由 const routes = [ { path: '/index', component: index } ] 2. 重定向 redirect const routes = [ { ...

  3. 一个简单的 ValueTask 的示例

    Task 确实有潜在的缺点,特别是对于实例创建很多  并且高吞吐量和性能是关键问题的场景  :  Task 是一个类.作为一个类,这意味着任何需要创建一个对象的操作都需要分配一个对象,分配的对象越多, ...

  4. 【BZOJ3328】PYXFIB(单位根反演,矩阵快速幂)

    [BZOJ3328]PYXFIB(单位根反演,矩阵快速幂) 题面 BZOJ 题解 首先要求的式子是:\(\displaystyle \sum_{i=0}^n [k|i]{n\choose i}f_i\ ...

  5. eclipse使用maven,启动工程tomcat报错:java.lang.ClassNotFoundException: org.springframework.web.context.Contex

    maven是个不错的管理jar包工具,但是我们在eclipse使用maven时,总是遇上这样那样的问题,比如今天,我编译工程,启动过后,tomcat报错:java.lang.ClassNotFound ...

  6. 在Go1.11.1中使用go module管理依赖

    今天试验了一下go的版本管理Go moule,只是安装了下,由于目前还没有进行大的项目开发,暂时没有碰到坑. 使用了模块后,可以不用在GOPATH中再建立src目录了,直接在GOPATH中就行 另外, ...

  7. Python基础10

    字符串大小写转换,除了upper,lower,还有一种方法,casefold( ) 方法 比较这两种方法的适用范围

  8. [转]Java游戏引擎

    JME(jMonkey Engine): JME是一个高性能的3D图形API,采用LWJGL作为底层支持.它的后续版本将支持JOGL.JME和Java 3D具有类似的场景结构,开发者必须以树状方式组织 ...

  9. Mybatis映射文件标签(关于sql)

    Mybatis映射文件 1.接口的全限定名和映射文件的namespace一致 <mapper namespace="com.offcn.dao.UserDao"> 2. ...

  10. 【夯实基础】-浅谈"单点登录"的几种实现方式

    单点登录 一.Session跨域 所谓Session跨域就是摒弃了系统提供的Session,而使用自定义的类似Session的机制来保存客户端数据的一种解决方案. 如:通过设置cookie的domai ...