Webpack 是一个模块打包工具，可以将多个模块打包成一个文件。它的特点是可以处理各种不同的资源，并且有强大的插件系统。其中，css-loader 和 style-loader 是处理 CSS 样式的两个重要 loader。
什么是 loader？
Loader 是 Webpack 中用于对模块源代码进行转换的工具。它们在模块加载的时候对文件进行处理，可以将不同的文件格式转换为有效的模块。
css-loader
css-loader 用于解决将 CSS 文件转换为模块的问题。它主要完成以下两个任务：
- 读取 CSS 文件并解析其中的样式规则
- 将样式规则转换为 JavaScript 模块
css-loader 一般是和 style-loader 配合使用，可以将 CSS 样式应用到 HTML 页面中。
安装和配置
安装 css-loader:
npm install css-loader --save-dev
然后在 Webpack 配置文件中进行配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- --------------
-
-
-
-这个配置告诉 Webpack，遇到 .css 文件时，使用 css-loader 进行处理。
示例
创建一个 style.css 文件：
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
}然后在项目中创建一个 index.js 文件：
import './style.css';
使用 Webpack 进行打包，运行代码后，页面的背景色就会变成灰色，这是因为 style.css 中的样式被应用到了 index.html 中。
style-loader
style-loader 用于将 CSS 样式应用到 HTML 页面中。它主要完成以下任务：
- 将样式规则转换为字符串
- 通过向页面中添加
style标签将样式应用到 HTML 页面中
style-loader 需要结合 css-loader 使用，因为它只能处理字符串类型的样式规则。
安装和配置
安装 style-loader:
npm install style-loader --save-dev
然后在 Webpack 配置文件中进行配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- -------------
-
-
-
-这个配置告诉 Webpack，遇到 .css 文件时，先使用 css-loader 处理，然后再使用 style-loader 处理。
示例
使用上面的示例，我们只需要在 index.js 文件中修改为：
import './style.css';
console.log('Hello World!');再次运行代码，就会发现控制台输出了 Hello World!，同时页面的背景色也变成了灰色。
注意事项
- Webpack 中的 loader 串联起来执行，也就是说，loader 的顺序是很重要的。
- 在使用
css-loader和style-loader时，一定要将css-loader放在style-loader前面。 - 在 Webpack 4 中，可以省略
-loader后缀。
总结
本文介绍了 Webpack 中 css-loader 和 style-loader 的使用方法。css-loader 用于将 CSS 文件转换为 JavaScript 模块，而 style-loader 用于将样式应用到 HTML 页面中。这两个 loader 都是非常重要的，在实际开发中需要好好掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66445301d3423812e42394c6