最近使用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. 使用python-gitlab获取本地gitlab仓库project信息的方法

    代码中有注释,直接看代码 #coding:utf8 #!/usr/bin/env python #@author: 9527 import gitlab import openpyxl import ...

  2. swagger-ui 导出离线文档md格式

    <dependency> <groupId>io.github.swagger2markup</groupId> <artifactId>swagger ...

  3. 了解 BASH

    管理整个计算机硬件的其实是操作系统的核心(kernel),这个核心是需要被保护的.所以使用者就只能通过shell来跟核心沟通,以让核心达到想要的工作.那么系统中有多少 shell?为什么要使用 bas ...

  4. 这可能是最全面的Spring面试题总结了

    Spring是什么? Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架. Spring的优点 通过控制反转和依赖注入实现松耦合. 支持面向切面的编程,并且把应用业务逻辑和系统 ...

  5. vue 之 computed方法自带缓存踩坑1

    使用场景:ant-vue 穿梭框使用 页面使用computed方法处理组织结构数据,退出页面时,对加载数据做了set null 操作,再次进入页面时,穿梭框只显示数据,无法做左右穿梭功能. 原因:co ...

  6. 运输问题—R实现

    table { margin: auto } 运输问题 随着社会和经济的不断进步,现代物流业蓬勃发展,如何充分利用时间.信息.仓储.配送和联运体系创造更多的价值,是物流运作必须解决的问题.运输问题(t ...

  7. 二进制安装Kubernetes(k8s) v1.23.4

    1.环境 网段 物理主机:192.168.1.0/24 service:10.96.0.0/12 pod:172.16.0.0/12 如果有条件建议k8s集群与etcd集群分开安装 1.1.k8s基础 ...

  8. C++/Qt网络通讯模块设计与实现(总结)

    至此,C++/Qt网络通讯模块设计与实现已分析完毕,代码已应用于实际产品中. C++/Qt网络通讯模块设计与实现(一) 该章节从模块的功能需求以及非功能需求进行分析,即网络通讯模块负责网络数据包的发送 ...

  9. [大数据]Hadoop简述

    1 Hadoop:发展沿革 摘要:1个人(Doug Cutting).2个公司(Google.Cloudera) 1.1 渊源 Hadoop项目 最初开发者/创始者: Doug Cutting(道格· ...

  10. ChatGPT4实现前一天

    目录 提出需求 代码实现 需求分析 单元测试 等价类划分 决策表 软件测试作业,用ChatGPT4来帮个小忙,小划水,勿喷勿喷,近期有相关作业的同学看到我的文章,建议修改一下,别撞车了,哈哈哈~ 提出 ...