最近使用webpack 进行react 依赖抽离时发现原本的webpack.optimize.CommonsChunkPlugin已经不能使用了


打包时提示



Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

官方仔细一看文档发现

The CommonsChunkPlugin has been removed in webpack v4 legato. To learn how chunks are treated in the latest version, check out the SplitChunksPlugin.

原来是得学着使用SplitChunksPlugin来构建了,

这个更是简单了,直接在module.exports增加如下案例代码即可

  optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
name: 'vendor',
chunks: 'all',
}
}
}
}

遗憾的是当时试着将依赖生成多个js文件并未成功

Error: webpack.optimize.CommonsChunkPlugin has been removed的更多相关文章

  1. Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimizat

    按照教程上配置文件如下: var webpack=require('webpack'); var HtmlwebpackPlugin=require('html-webpack-plugin'); v ...

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

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

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

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

  4. 使用webpack.optimize.CommonsChunkPlugin提供公共代码

    在webpack4里使用webpack.optimize.CommonsChunkPlugin时,报错,webpack4删除了常用的 CommonsChunkPlugin ,提示我们用config.o ...

  5. webpack.optimize.CommonsChunkPlugin

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

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

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

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

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

  8. webpack关于CommonsChunkPlugin在高版本被移除的替代方案问题

    1.在指南的缓存章节里webpack.config.js文件中,使用new的方法会报错 const webpack = require('webpack'); + new webpack.optimi ...

  9. Can someone explain Webpack's CommonsChunkPlugin

    I get the general gist that the CommonsChunkPlugin looks at all the entry points, checks to see if t ...

  10. webpack.optimize.UglifyJsPlugin配置说明

    https://segmentfault.com/a/1190000008995453?utm_source=tuicool&utm_medium=referral

随机推荐

  1. Maven项目的创建教程

    1.创建Maven项目 首先File->New新建一个Maven项目,选择相应地址保存,点击CREATE完成新建 2.改成Web项目 右键选择Add Framework Support... 再 ...

  2. 在 Maui 中自绘组件1:绘制

    在 Maui 中自绘组件 系列文章已完结,共六篇,此为第一篇. 在 Maui 中自绘组件1:绘制 在 Maui 中自绘组件2:可绑定属性 在 Maui 中自绘组件3:事件与命令 在 Maui 中自绘组 ...

  3. el与data的两种写法

    el的两种写法 Vue初始化(被创建)后会判断有无el 有el:创建Vue实例对象的时候配置el属性 无el:通过vm.$mount('#root')指定el的值 data的两种写法 对象式:data ...

  4. RHEL8使用NMCLI管理网络

    使用 NMCLI 配置静态以太网连接 要在命令行上配置以太网连接,请使用 nmcli 工具. 例如,以下流程使用以下设置为 enp7s0 设备创建 NetworkManager 连接配置文件: 静态 ...

  5. 【绘制分形图案】多重收缩打印机(MRCM)举例

    note 2020-08-05搬运 下面的内容来自我的CSDN博客 多重收缩打印机(MRCM)是生成分形图案的一种方法.主要思想还是多次迭代.   每次都是将上一次的输出拿来做线性仿射变换后重新组合在 ...

  6. vue2双向绑定原理及源码解析

    首先我们要知道VUE实现双向绑定的步骤是什么: 实现一个监听器 Observer 对数据对象进行遍历,包括子属性对象的属性,利用 Object.defineProperty() 对属性都加上 sett ...

  7. 关于Docker compose值IP与域名的映射 之 extra_host

    公司的所有项目都是采用Docker容器化部署,最近有一个项目需要使用定时任务调用第三方Api,正式web环境服务器的网络与第三方网络是通畅的,但是当将代码发布到正式环境,调用接口却显示 System. ...

  8. CTF-Web-PHP反序列化

    概念解释 PHP 反序列化漏洞又叫做 PHP 对象注入漏洞,我觉得这个表达很不直白,也不能说明根本的问题,不如我们叫他 PHP 对象的属性篡改漏洞好了(别说这是我说的~~) 反序列化漏洞的成因在于代码 ...

  9. 【装饰器设计模式详解】C/Java/JS/Go/Python/TS不同语言实现

    简介 装饰器模式(Decorator Pattern)是一种结构型设计模式.将对象放入到一个特殊封装的对象中,为这个对象绑定新的行为,具备新的能力,同时又不改变其原有结构. 如果你希望在无需修改代码的 ...

  10. JVM的垃圾收集算法

    介绍分代收集理论和几种垃圾收集算法的思想及其发展过程. 分代收集理论 当前商业虚拟机的垃圾收集器,大多数都遵循了 "分代收集"(Generational Collection)的理 ...