解决webpack报错:You forgot to add ‘mini-css-extract-plugin‘ plugin

现象:

原因: webpack5.72跟mini-css-extract-plugin有兼容性问题

解决办法:把 new MiniCssExtractPlugin()放在webpack配置文件中plugins数组的第一项:

   plugins: [

      // 此处解决报错:You forgot to add 'mini-css-extract-plugin' plugin

      // MiniCssExtractPlugin必须放在plugins数组的第一项,否则会报上面的错误

      new MiniCssExtractPlugin({

        filename: "static/css/[name].[contenthash:8].css",

        chunkFilename: "static/css/[name].[contenthash:8].chunk.css",

      }), 

     debug? [new webpack.DefinePlugin({}),] :[ xxx插件 ]

不能把new MiniCssExtractPlugin()放在debug的三元表达式数组中

来自ChatGpt的回答:

MiniCssExtractPlugin 插件必须放在插件数组中的第一项,以确保它在构建过程中正确地处理 CSS 提取,而不会出现 "You forgot to add 'mini-css-extract-plugin' plugin" 的错误。

这是因为 Webpack 在处理插件时会按照它们在插件数组中的顺序依次执行。MiniCssExtractPlugin 插件负责提取 CSS,如果它不在第一项,那么在执行后续插件时可能会导致 CSS 提取发生问题。

将 MiniCssExtractPlugin 插件放在第一项确保它在构建过程的早期阶段就生效,从而避免了可能的问题。这是 MiniCssExtractPlugin 插件的一种最佳实践。

至于为什么它不能放在 BundleAnalyzerPlugin 后面,原因可能是 BundleAnalyzerPlugin 会在构建过程中生成报告文件,而 MiniCssExtractPlugin 插件必须在 CSS 文件生成之前生效。将 MiniCssExtractPlugin 放在 BundleAnalyzerPlugin 后面可能会导致构建流程不正确。

总之,确保 MiniCssExtractPlugin 插件位于插件数组的第一项是一种常见的做法,以确保正确的 CSS 提取。如果你改变了插件的顺序,并且它仍然正常工作,那可能是因为你的特定项目配置适应了这种变化。但将其放在第一项是一个更可靠的方法,适用于大多数情况。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/144586.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java项目-文件搜索工具

目录 项目背景 项目效果 SQLite的下载安装 使用JDBC操作SQLite 第三方库pinyin4j pinyin4j的具体使用 封装pinyin4j 数据库的设计 创建实体类 实现DBUtil 封装FileDao 设计scan方法 多线程扫描 周期性扫描 控制台版本的客户端 图形化界面 设计图形化界面 项目…

最新AI创作系统源码ChatGPT源码+附详细搭建部署教程+AI绘画系统+支持国内AI提问模型

一、AI系统介绍 SparkAi创作系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT?小编这里写一个详细图文教程吧&am…

二十二,加上各种贴图

使用pbr的各种贴图,albedo,金属度,ao,法线,粗糙度,可以更好的控制各个片元 1,先加上纹理坐标 texCoords->push_back(osg::Vec2(xSegment, ySegment)); geom->setVertexAttribArray(3, texCoords, osg::Array::BI…

WebPack-打包工具

从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求. 下面举个例子 : main.js 我们只命名导出一个变量 export const name"老六"index.js import { name } from "./tset/…

聊聊并发编程——Condition

目录 一.synchronized wait/notify/notifyAll 线程通信 二.Lock Condition 实现线程通信 三.Condition实现通信分析 四.JUC工具类的示例 一.synchronized wait/notify/notifyAll 线程通信 关于线程间的通信,简单举例下: 1.创建ThreadA传入共享…

Vue之ElementUI实现登陆及注册

目录 ​编辑 前言 一、ElementUI简介 1. 什么是ElementUI 2. 使用ElementUI的优势 3. ElementUI的应用场景 二、登陆注册前端界面开发 1. 修改端口号 2. 下载ElementUI所需的js依赖 2.1 添加Element-UI模块 2.2 导入Element-UI模块 2.3 测试Element-UI是否能用 3.编…

【VUE复习·9】v-for 基础用法(循环渲染也叫列表渲染)

总览 1.v-for 都能循环什么 2.用法 一、v-for 都能遍历什么 能循环的东西包括:数组、对象、字符串(和java里面的3个引用数据类型一样)、纯粹循环数量(少用) 二、用法 1.用法1:简单循环(遍历…

Activiz 9.2 for Linux Crack

Activiz 9.2 在 C#、.Net 和 Unity 软件中为您的 3D 内容释放可视化工具包的强大功能。 ActiViz 允许您轻松地将 3D 可视化集成到您的应用程序中。 ActiViz 功能 用 C# 封装的 3D 可视化软件系统 允许在 .NET 环境中快速开发可投入生产的交互式3D 应用程序 支持窗口演示基础 (…

SI3262:国产NFC+MCU+防水触摸按键三合一SoC芯片

目录 SI3262简介特点结构框图芯片特性 SI3262简介 Si3262是高度集成ACD低功耗MCUNFC15通道防水触摸按键的SoC芯片。 其MCU模块具有低功耗、Low Pin Count、宽电压工作范围,集成了13/14/15/16位精度的ADC、LVD、UART、SPI、I2C、TIMER、WUP、IWDG、RTC、TSC等丰富的…

紫光展锐6nm国产5G处理器T820_国产手机芯片5G方案

紫光展锐T820是一款采用先进6nm EUV工艺的芯片,采用134三丛集八核心CPU架构,由1个主频为 2.7GHz 的 Arm Cortex-A76 大核和 3个主频为2.3GHz 的Arm Cortex-A76大核以及4个主频为2.1GHz的 Arm Cortex-A55组成 ,支持高达3MB 三级缓存&#xff0…

jvm内存分配与回收策略

自动内存管理 解决两个问题 自动给对象分配内存 对象一般堆上分配(而实际上也有可能经过即时编译后被拆散为标量类型并间接地在栈上分配) 新生对象通常会分配在新生代,少数情况下(例如对象大小超过一定阈值)也可能…

[C++网络协议] 优于select的epoll

1.epoll函数为什么优于select函数 select函数的缺点: 调用select函数后,要针对所有文件描述符进行循环处理。每次调用select函数,都需要向该函数传递监视对象信息。 对于缺点2,是提高性能的最大障碍。因为,套接字是…

Python爬虫实战案例——第六例

文章中所有内容仅供学习交流使用,不用于其他任何目的!严禁将文中内容用于任何商业与非法用途,由此产生的一切后果与作者无关。若有侵权,请联系删除。 目标:去哪儿网指定城市人气值最高的15个景点评论数据采集 地址&a…

微信小程序开发基础(二)基本组件

本帖开始介绍小程序中的一些基本组件~ 微信小程序是一种轻量、快速、跨平台的应用程序,是微信公众号的重要组成部分。随着微信小程序的普及,越来越多的开发者和企业开始使用微信小程序来搭建自己的应用,但是对于初次接触微信小程序的开发者…

排序:败者树和置换选择排序(解决外部排序中的优化问题)

1.算法目的(败者树) 解决多路平衡归并带来的问题。 在外部排序中,使用k路平衡归并策略, 选出一个最小元素需要对比关键字(k-1)次, 导致内部归并所需时间增加。(可用“败者树”进行优化) 2.败者树的定义 …

【C++11】多线程

多线程创建线程thread提供的成员函数获取线程id的方式线程函数参数的问题线程join场景和detach 互斥量库(mutex)mutexrecursive_mutexlock_guard 和 unique_lock 原子性操作库(atomic)条件变量库(condition_varuable&a…

一文读懂集合竞价,建议收藏,读完少交学费

集合竞价每个时间段交易规则及作用都不一样,了解集合竞价的规则,有利于琢磨主力的意图。 大部分同学都不是很关心集合竞价,也不知道如何利用集合竞价买卖股票。如上图所示,有同学在9点15看着股票涨停,立马冲进去&…

【切片】基础不扎实引发的问题

本次文章主要是来聊聊关于切片传值需要注意的问题,如果不小心,则很容易引发线上问题,如果不够理解,可能会出现奇奇怪怪的现象 问题情况: 小 A 负责一个模块功能的实现,在调试代码的时候可能不仔细&#x…

UE蓝图学习(从Unity3D而来)

一、UE组件对比Unity3D,从Unity3D过渡来学的角度出发,可以理解为在 空物体下放置子物体。UE没有U3D那种可以将组件挂在自身空物体上面。 二、UE 蓝图的情境提示,必须先找到相应的类型,对象对象、事件事件,才能找到相应…

云原生Kubernetes:Pod控制器

目录 一、理论 1.Pod控制器 2.Deployment 控制器 3.SatefulSet 控制器 4.DaemonSet 控制器 5.Job 控制器 6.CronJob 控制器 二、实验 1.Deployment 控制器 2.SatefulSet 控制器 3.DaemonSet 控制器 4.Job 控制器 5.CronJob 控制器 三、问题 1. showmount -e 报错…