Webpack 是一个模块打包器，它可以将多个模块打包成一个文件，从而方便地开发和维护项目。Webpack 最初是一个 JavaScript 打包工具，但是随着时间的推移，它已经成为了一个通用的前端打包工具，可以打包不仅仅是 JavaScript，还可以打包图片、CSS 等前端资源。
CSS 是前端开发中必不可少的一部分，掌握 Webpack 如何管理和打包 CSS，对于提高前端开发的工作效率和项目的可维护性都有很大的帮助。
安装和配置
安装 Webpack 和相关的前置工具，可以参考 Webpack 的官方文档，这里不再赘述。
在项目中使用 CSS，首先需要安装 css-loader 和 style-loader：
npm install --save-dev css-loader style-loader
安装完成之后，修改 Webpack 配置文件，配置 loader：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
--上面的代码主要做了两个事情。第一个是，当 Webpack 加载一个以 .css 结尾的模块时，会使用 css-loader 来加载这个模块；第二个是，在加载完成后，使用 style-loader 将解析出来的 CSS 动态插入到 HTML 页面的 head 中。
使用 CSS
在代码中使用 CSS 相对简单，只需要在 JavaScript 中引入即可：
import './style.css';
在 CSS 文件中使用其他 CSS 文件也和平常一样非常简单：
@import './reset.css';
body {
font-size: 14px;
}打包 CSS
Webpack 不仅支持加载、解析 CSS，还支持将多个 CSS 文件打包成一个文件。
在不进行任何配置的情况下，Webpack 会将每个 CSS 文件打包成一个单独的文件，这样不太方便管理，而且也会增加 HTTP 请求的数量。
我们可以使用 mini-css-extract-plugin 来将多个 CSS 文件打包成一个文件：
npm install --save-dev mini-css-extract-plugin
修改 Webpack 配置文件，添加插件：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- ----------------------------- --------------
--
--
--
-------- -
--- ----------------------
--------- --------------------
-------------- ------------------
---
--
--通过 MiniCssExtractPlugin.loader，CSS 会被提取成单独的文件，而不是被动态地插入到 HTML 页面的 head 中。filename 和 chunkFilename 是打包后的文件名和 chunk 名。
总结
通过本文的介绍，我们学会了如何使用 Webpack 加载和管理 CSS，并最终将多个 CSS 文件打包成一个文件。这不仅可以提高前端开发的效率，还可以使项目更具可维护性。希望对大家有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b9b0f8add4f0e0ff234e3b