在开发前端项目时，我们通常会使用 CSS 来美化页面布局、实现动画效果等等。但是，当项目变得越来越庞大之后，CSS 文件也会变得越来越复杂，维护成本也随之增加。为了解决这个问题，CSS 模块化应运而生。WebPack 是当前前端使用最广泛的工具，在 Webpack 应用中，使用 CSS 模块化也非常方便。那么，WebPack 如何处理 CSS 模块化呢？
1. 什么是 CSS 模块化
在 CSS 模块化中，我们将每一个模块的样式放在单独的文件中，以达到样式与组件解耦的目的。这样做的好处是可以提高代码的可读性和可维护性，并且可以方便的在不同模块之间共享样式。
2. Webpack 中的 CSS 模块化
Webpack 通过 css-loader 和 style-loader 模块来实现 CSS 模块化。css-loader 可以将 CSS 文件转换成 JavaScript 模块，并且可以实现类似于模块化编程的功能。style-loader 可以将 CSS 模块生成的 JavaScript 代码中的样式通过动态的创建 style 标签的方式添加到 HTML 的 head 中。这样就达到了将样式和组件解耦的目的。
2.1 安装并配置 css-loader
首先，我们需要安装 css-loader：
npm install css-loader --save-dev
然后，我们在 Webpack 配置文件中设置 css-loader：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
------------
-
-
-
-这个配置意思是当 Webpack 打包遇到 .css 文件时，调用 css-loader。上面的配置会将 CSS 文件转换为 JavaScript 模块，并生成对应的 JavaScript 代码供其他模块使用。
2.2 安装并配置 style-loader
接下来，我们需要安装 style-loader：
npm install style-loader --save-dev
然后，在 use 数组中添加 style-loader：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
---------------
------------
-
-
-
-这样 Webpack 会先调用 css-loader，再调用 style-loader。
2.3 配置 CSS 模块化
为了在项目中使用 CSS 模块化，我们需要通过 css-loader 配置 modules。这个配置可以让我们的 CSS 样式在各自的模块中独立开来。
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------- -----
--
--
-
-
-
-现在，当 Webpack 构建时，css-loader 将为所有的 CSS 打开并启用模块支持。这意味着你现在可以导入 CSS 模块，并且在 JavaScript 模块中使用它们：
import styles from './styles.css'; console.log(styles); // 打印出模块化的 CSS 样式对象
这个样式对象的属性名和 CSS 类名是相同的，属性值是一个哈希值，所以它们是唯一的。
在 HTML 中使用这些模块化的 CSS 类名，你需要使用对象属性访问语法，如下：
<div class="${styles.box}"></div>3. 总结
在本文中，我们了解了 Webpack 如何处理 CSS 模块化。通过 css-loader 和 style-loader，我们可以在 Webpack 应用中方便地实现 CSS 模块化，提高代码的可读性和可维护性，并且方便地在不同模块之间共享样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491a4ca48841e9894fab1ba