前言
上文讲解了 webpack 的简单配置和配置文件的使用，初步实现模块化的打包构建工作。
本文将以在 webpack 中处理 css 样式文件为例，演示 loader 的使用。
准备文件
准备样式文件：src/index.css
body {
font-size: 40px;
color: gold;
}前文中说过，webpack 的世界，一切皆模块，每个文件就是一个模块。那么 css 文件也是一个模块，将其引入入口文件中，src/index.js：
import './index.css'
document.querySelector('body').innerHTML = 'Hello'然后执行打包命令：
pnpm webpack报错：
根据报错信息 “You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file”，意思是 需要配置一个合适的 loader 来处理 css 文件。
Loader
什么是 loader
Webpack 基于 Node.js， 只“认识” JavaScript 和 JSON 文件。Loader，模块加载器，就是让 webpack 能够去识别其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。
处理 css 文件，我们需要用到两个 loader：
- css-loader：解析 css 文件，转译为 webpack 能识别的模块
- style-loader：将 css 使用
安装 loader
pnpm add css-loader style-loader -D配置 loader
安装好 loader 还需要进行配置，告诉 webpack 这个 loader 针对哪些类型的模块发挥作用。
配置文件中提供了一个 module.rules 配置项，可知该配置项是用来配置模块规则的，也就是用来配置 loader 的。
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, './dist')
},
// module 用来配置处理模块
module: {
// rules 是一个数组, 每一项是针对某类模块的一种配置；可以有若干个配置
rules: [
// 规则有几个常用的属性
{
// 通过正则表达式指定匹配的模块类型
test: /\.css$/,
// 使用哪种 loader 进行处理
// loader 的生效是有顺序的，从右到左，也就是先用 css-loader 处理 webpack 能识别的内容，再经 style-loader 将样式插入到页面中
use: ['style-loader', 'css-loader'],
}
]
}
}打开命令行窗口，执行打包命令：
pnpm webpack没有再报错，css 模块已经能被正确处理了。
浏览器打开 index.html：
经过打包后的 css 样式被插入到 html 文件中了。
但是这种打包方式不是特别好，最好的方式是将 css 样式内容打包成单独的文件，再被 html 引入。这样有利于减少 html 文件的体积，能提高首次加载 html 文件的速度。同时，也能合理的利用静态资源文件缓存，和应用 CDN 方案。
要实现这个效果，需要 webpack plugin 的支持，我们放到后面讲 plugin 的时候再介绍。
小结
本文介绍了如何使用 webpack 处理 css 文件，其实就是利用 css-loader 和 style-loader。同时介绍了 loader 在 webpack 中发挥的作用，就是帮助 webpack 处理它不认识的模块类型。同时也讲解了 loader 的简单配置。
下篇文章，会介绍如何在 webpack 中处理 less 文件和 scss 文件。
