在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. ant-design自定义FormItem--上传文件组件

    自定义上传组件,只需要在内部的值变化之后调用props中的onChange方法就可以托管在From组件中, 此外为了保证,初始化值发生变化后组件也发生变化,需要检测initialValue 变化,这是 ...

  2. 【C++】STL各容器的实现,时间复杂度,适用情况分析

    一.vector 1.概述 动态数组,在内存中具有连续的储存空间,在堆上分配内存,支持快速随机访问,在中间插入和删除慢,但在末尾插入和删除快 2.特点 1)拥有一段连续的内存空间,并且起始地址不变,因 ...

  3. char (*a)[N] 与 char* a[M]区别

    已知第二维 char (*a)[N]; //指向数组的指针,实际上这里的N并没有实际的约束意义,平时也很少这么用a = (char (*)[N])malloc(sizeof(char *) * m); ...

  4. 【2】hexo+github搭建个人博客的简单使用

    使用hexo+github搭建一个可以外网访问的个人博客,此文用于记录博客初级的使用方法. 新建-编写-生成-部署文章的全过程 1.使用cmd完成 打开命令提示符[win+r输入cmd] 切换到自己本 ...

  5. DateTime的ToString方法格式

    新建一个.NET Core控制台项目,敲入如下代码: using System; namespace NetCoreDatetime { class Program { static void Mai ...

  6. Reactor的NIO线程模型

    1.Reactor单线程模型 传统的javaNIO通信的线程模型.该线程模型仅有一个I/O线程处理所有的I/O操作,如下图:   单线程模型的Reactor 所有的客户端都连接到一个I/O线程负责的A ...

  7. Jenkins的使用(三)-------Publish over SSH和Publish over FTP

    七.构建后操作 1.使用Publish over SSH 1.左边菜单栏    Manage Jenkins --->ManagePlugins--->可选插件,然后搜索 Publish ...

  8. disconf的简单使用与远程配置更改为使用本地配置

    这几天因为阿里云迁移到腾讯云的原因,原来服务器上的disconf不再使用了.在这段时间里,系统出现的bug很难寻找原因(项目起不来),现在想要把disconf远程配置更改成直接使用本地配置.首先,了解 ...

  9. android版本对应表

    API Level 最初Android版本 Linux内核版本 首次发布日期 后续Android版本 28 9 Unknown 2018-07-02(Beta 3) - 27 8.1 4.10 201 ...

  10. js 数组去重总结

    es6 set ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. let arr = [1,2,3,4,3,2,3,4,6,7,6]; let unique = ...