Webpack 是一个常用的前端打包工具，它可以将多个模块的代码打包成一个文件，实现前端资源的优化和管理。而 mini-css-extract-plugin 是一个 Webpack 插件，用于将 CSS 代码从 JS 代码中分离出来，以提高页面加载速度和用户体验。但是，在升级到 Webpack 5.0 后，有些开发者会遇到 mini-css-extract-plugin 失效的问题。本文将介绍如何解决这个问题。
问题描述
在 Webpack 5.0 中，mini-css-extract-plugin 会出现以下错误：
------ ------ ---- ------ -------------------------
这是因为在 Webpack 5.0 中，webpack/lib/Compilation 被移除了，而 mini-css-extract-plugin 依赖于 webpack/lib/Compilation。
解决方案
为了解决这个问题，我们需要升级 mini-css-extract-plugin 到最新版本，并修改配置文件。
升级 mini-css-extract-plugin
在 package.json 文件中，将 mini-css-extract-plugin 的版本升级到最新版本：
--------------- - -------------------------- --------- --- -
修改配置文件
在 Webpack 配置文件中，需要将 MiniCssExtractPlugin.loader 替换为 CssMinimizerPlugin.loader。
----- ------------------ - ----------------------------------------
----- -------------------- - -----------------------------------
-------------- - -
---
------------- -
---------- -
--- ---------------------
--
--
-------- -
--- ----------------------
--------- ---------------------------
-------------- -------------------------
---
--
------- -
------ -
-
----- ----------
---- ----------------------------- --------------
--
--
--
--在上面的代码中，我们将 MiniCssExtractPlugin.loader 替换为 CssMinimizerPlugin.loader，同时在 optimization 中添加了 CssMinimizerPlugin。这样就可以解决 mini-css-extract-plugin 失效的问题了。
示例代码
----- ------------------ - ----------------------------------------
----- -------------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- --------------------------
----- ----------------------- --------
--
------------- -
---------- -
--- ---------------------
--
--
-------- -
--- ----------------------
--------- ---------------------------
-------------- -------------------------
---
--
------- -
------ -
-
----- ----------
---- ----------------------------- --------------
--
--
--
--总结
升级到 Webpack 5.0 后，mini-css-extract-plugin 失效是一个常见的问题。为了解决这个问题，我们需要升级 mini-css-extract-plugin 到最新版本，并修改配置文件。本文介绍了如何解决这个问题，并提供了示例代码。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f7e27dd10417a2223490e2