在前端开发中，CSS 是必不可少的一部分。随着项目的不断扩大，CSS 的代码量也会逐渐增加，这时候就需要考虑对 CSS 进行模块化管理，以便于维护和开发。而 Webpack4 使用 mini-css-extract-plugin 插件可以帮助我们实现对 CSS 的模块化管理，提取出单独的 CSS 文件，减小 JS 文件的体积，加快页面的加载速度。本文将详细介绍 Webpack4 使用 mini-css-extract-plugin 插件的使用方法和注意事项。
安装 mini-css-extract-plugin 插件
首先，我们需要安装 mini-css-extract-plugin 插件。可以使用 npm 安装：
--- ------- ----------------------- ----------
配置 Webpack4
在 Webpack4 的配置文件中，我们需要做以下几个配置：
- 引入 mini-css-extract-plugin 插件，将 CSS 提取为单独的文件。
----- -------------------- - -----------------------------------
- 配置 MiniCssExtractPlugin 插件。
-------- -
--- ----------------------
--------- -------------------------
-------------- ----------------------
--
-其中，filename 表示输出的 CSS 文件名，chunkFilename 表示按需加载时输出的文件名。
- 配置 CSS 的 loader。
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
-其中，MiniCssExtractPlugin.loader 表示使用 MiniCssExtractPlugin 插件提取 CSS，"css-loader" 表示解析 CSS 文件。
示例代码
下面是一个简单的示例代码，展示如何使用 mini-css-extract-plugin 插件提取 CSS。
-- -----------------
----- ---- - ----------------
----- -------------------- - -----------------------------------
-------------- - -
------ -
---- ----------------
--
------- -
--------- ------------------------
----- ----------------------- -------
--
-------- -
--- ----------------------
--------- -------------------------
-------------- ----------------------
--
--
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
-
--注意事项
mini-css-extract-plugin 插件只能用于 Webpack4，如果使用 Webpack3 或更早版本，则需要使用 extract-text-webpack-plugin 插件来提取 CSS。
需要注意 CSS 文件的引入顺序，因为 Webpack 是按照模块依赖关系进行打包的，如果引入顺序不正确，可能会导致 CSS 样式不生效。
mini-css-extract-plugin 插件不支持热模块替换（HMR），因为它是将 CSS 提取为单独的文件，而不是将 CSS 嵌入到 JS 文件中。
mini-css-extract-plugin 插件可以与 optimize-css-assets-webpack-plugin 插件一起使用，用于压缩 CSS 文件。
总结
通过使用 mini-css-extract-plugin 插件，我们可以将 CSS 提取为单独的文件，实现对 CSS 的模块化管理，减小 JS 文件的体积，加快页面的加载速度。在使用插件的过程中，需要注意 CSS 文件的引入顺序，以及插件的兼容性和 HMR 的问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/657e36c1d2f5e1655d9084d1