WebPack 是一个优秀的前端构建工具，它可以将多个模块打包成一个或多个文件，使得前端开发变得更加高效、可维护。在 WebPack 中，我们可以通过配置来实现提取 CSS 样式表。
为什么要提取 CSS 样式表？
在开发中，我们通常会将 CSS 样式写在 HTML 文件的 <style> 标签内，这样虽然方便，但是会导致以下问题：
- 代码冗余：每个页面都会有相同的 CSS 样式，导致代码冗余。
- 阻塞渲染：CSS 样式表在页面加载时会阻塞页面的渲染，导致页面加载速度变慢。
- 难以维护：将 CSS 样式和 HTML 混杂在一起，导致代码难以维护。
因此，我们需要将 CSS 样式表提取出来，以便于优化代码结构、提高页面加载速度和便于维护。
在 WebPack 中，我们可以使用 mini-css-extract-plugin 插件来实现 CSS 样式表的提取。以下是具体操作步骤：
1. 安装插件
首先，我们需要安装 mini-css-extract-plugin 插件：
npm install mini-css-extract-plugin --save-dev
2. 配置 WebPack
在 WebPack 的配置文件中，我们需要引入 mini-css-extract-plugin 插件，并在 module 配置中添加相应的规则：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
-- ---
------- -
------ -
-- ---
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- ----------------------
--------- --------------------
-------------- -----------------
--
-
--以上配置中，我们添加了一个 CSS 文件的 loader，并使用 MiniCssExtractPlugin.loader 来提取 CSS 样式表。同时，我们还通过 MiniCssExtractPlugin 插件来配置提取后的文件名。
3. 使用提取后的 CSS 样式表
在 HTML 文件中，我们可以通过 link 标签来引入提取后的 CSS 样式表：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- -----------
----- ---------------- ----------------
-------
------
---- --- ---
-------
-------示例代码
以下是一个基本的 WebPack 配置文件，包含了提取 CSS 样式表的配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- -------------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- ----------------------
--------- --------------------
-------------- -----------------
--
-
--总结
通过配置 WebPack，我们可以很方便地将 CSS 样式表提取出来，从而优化代码结构、提高页面加载速度和便于维护。在实际开发中，我们应该遵循这个原则，将 CSS 样式表与 HTML 分离，以提高代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65753057d2f5e1655de5464a