最近使用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. 浅谈js防抖和节流

    防抖和节流是处理高频触发最常见的优化方式,对性能提升有很大的帮助. 防抖:将多次的高频操作优化为只在最后一次执行,应用场景如:输入框,只需在最后一次输入进行校验即可. 节流:保证每隔一段时间只执行一次 ...

  2. OVS-DPDK 流表查询详解

    一图胜千言: flow和miniflow 在介绍之前先说一些概念:里面有两个结构很重要,一个是flow一个是miniflow这里介绍一下他们的数据结构和构造函数. flow: flow的特点是8字节对 ...

  3. 2022年8月学科能力综合测试(TACA)试题解答 Mathemaitca练习

    目录 试题地址 1 4 5 10 13 你让我猜我肯定这么猜 试题地址 https://k.sina.com.cn/article_2897328623_acb1b9ef019011qen.html ...

  4. Java多线程开发CompletableFuture的应用

    ​做Java编程,难免会遇到多线程的开发,但是JDK8这个CompletableFuture类很多开发者目前还没听说过,但是这个类实在是太好用了,了解它的一些用法后相信你会对它爱不释手(呸渣男,咋对谁 ...

  5. 制作一个同时具有PE和Windows原版安装方式的U盘

    这个方法可能很多人已经制作成功过了,但是呢,也有些人不会的,也可能没想到过,那就是让Win PE与Windows原版安装包在一个U盘里面同时共存. 需要用到的软件有这几样:DiskGenius.Gim ...

  6. forEach如何终止循环

    try { try { this.list.forEach(item => { ..... throw new Error('end') }) } catch(err) { console.lo ...

  7. window计时器函数

    // 定时器: // 计时器 // 开启:setInterval() // 参数1:回调函数 // 参数2:毫秒数 // 功能:每个指定的毫秒数执行一次回调函数 demo: var t = setIn ...

  8. jQuery绑定方法

    流程/*** * 1.文件命名 * jquery.banner.1.0.0.js * jquery.banner.js * 2.添加匿名函数 * (function(){})() * 3.给插件前后添 ...

  9. WPF 界面布局、常用控件入门教程实例 WPF入门学习控件快速教程例子 WPF上位机、工控串口通信经典入门

    WPF(Windows Presentation Foundation)是一种用于创建 Windows 桌面应用程序的框架,它提供了丰富的控件库和灵活的界面布局,可以创建现代化的用户界面.下面是 WP ...

  10. Low-Code,一定“low”吗?

    作者:京东保险 吴凯 前言 低代码是一组数字技术工具平台,基于图形化拖拽.参数化配置等更为高效的方式,实现快速构建.数据编排.连接生态.中台服务.通过少量代码或不用代码实现数字化转型中的场景应用创新. ...