在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. 【学习笔记】薛定谔的喵咪Cat—球盒问题(全详解)

    [学习笔记]薛定谔的喵咪Cat-球盒问题(全详解) [题目描述] 当一个猫在盒子里时,因为放射物的状态我们不知道,所以猫的状态我们也不知道,这就所谓猫的生死纠缠态,也是所谓的薛定谔的猫. 当我们做需要 ...

  2. [转] vue 自定义组件使用v-model

    <input v-model="something"> v-model指令其实是下面的语法糖包装而成: <input :value="something ...

  3. C# word格式转换为pdf

    引用 Microsoft.Office.Interop.Word 这个dll,可以在解决方案浏览器中搜索到并下载. 源码如下: public bool WordToPDF(string sourceP ...

  4. python plotly 画饼状图

    代码 import pandas as pd import numpy as np import plotly.plotly as py import plotly.graph_objs as go ...

  5. GIT篇章(二)

    如何多人协同开发同一个项目? 使用代码版本控制[version control]软件, 目前市面上比较流行的代码版本控制器有: git,svn,csv 1. 使用git管理代码版本 本项目使用git管 ...

  6. 设计模式之(九)桥接模式(Bridge)

    桥接模式是怎么诞生的呢?来看一个场景. 一个软件企业开发一套系统,要兼容所有的不同类型硬件和和各种操作系统.不同种类硬件主要是 电脑.平板电脑.手机.各种操作系统是苹果系统.windows 系统.Li ...

  7. QML 移动端适配一个参考思路

    参考: Qt Quick 准确的移动平台屏幕适配 qt qml 高宽自动适配android设备 QML 从无到有 (移动适配) 思路:以一个平台分辨率为基准(如320*480),考虑其与其它平台的比例 ...

  8. 分析mybatis中 #{} 和${}的区别

    分析方法: 在 GenericTokenParser这个类的parse方法的这一行下个断点调试一下就明白了 builder.append(handler.handleToken(content)); ...

  9. 你的MES系统又失败了?正确的打开方式在这里

    都知道MES实施艰难,真正成功的很少:有人戏称:10个MES,7个失败.1个不死不活.1个伪成功,最后一个仍需努力. 导致MES实施失败的原因有很多,所谓“成功的MES是一样的,失败的MES各有各的失 ...

  10. 高性能TcpServer(Java) - Netty

    源码下载 -> 提取码  QQ:505645074 Netty 是一个高性能.异步事件驱动的 NIO 框架,它提供了对 TCP.UDP 和文件传输的支持,作为一个异步 NIO 框架,Netty ...