在使用 webpack 4 构建前端项目时，我们通常会使用 mini-css-extract-plugin 插件来将 CSS 文件从 JS 文件中分离出来，以提高页面加载速度。但是，在实际使用中，我们可能会遇到一些报错问题，本文将介绍一些常见的报错问题及其解决方法。
问题一：Module build failed (from ./node_modules/css-loader/dist/cjs.js)
当使用 mini-css-extract-plugin 插件时，有时会遇到以下报错信息：
Module build failed (from ./node_modules/css-loader/dist/cjs.js): TypeError: Cannot read property 'plugins' of undefined
这是因为 webpack 4 中，对于 extract-text-webpack-plugin 插件的使用已经被废弃，改用 mini-css-extract-plugin 插件。解决方法是在 webpack 配置文件中，将 extract-text-webpack-plugin 替换为 mini-css-extract-plugin，示例如下：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- ----------------------
-
--问题二：TypeError: Cannot read property 'apply' of undefined
在使用 mini-css-extract-plugin 插件时，还可能会遇到以下报错信息：
TypeError: Cannot read property 'apply' of undefined
这是由于 webpack 4 中，mini-css-extract-plugin 插件的版本过低导致的。解决方法是升级 mini-css-extract-plugin 插件的版本，示例如下：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- ----------------------
--------- ---------------------------
-------------- ------------------------
--
-
--问题三：TypeError: Cannot read property 'identifier' of undefined
在使用 mini-css-extract-plugin 插件时，还可能会遇到以下报错信息：
TypeError: Cannot read property 'identifier' of undefined
这是由于 mini-css-extract-plugin 插件的版本过高导致的。解决方法是降低 mini-css-extract-plugin 插件的版本，示例如下：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- ----------------------
--------- ---------------------------
-------------- ------------------------
--
-
--总结
在使用 mini-css-extract-plugin 插件时，我们可能会遇到一些报错问题，但这些问题都可以通过升级或降低插件版本、修改 webpack 配置文件等方式来解决。通过学习这些问题及其解决方法，我们可以更好地使用 mini-css-extract-plugin 插件来优化我们的前端项目，提高页面加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cf1180add4f0e0ff86825a