webpack不仅仅可以用于模块化打包，还可以利用Loader来对文件进行预处理，例如使用ts-loader将Typescript转换成javascript，使用vue-loader解析Vue SFC(单文件组件)等。

要使用loader，需要先安装loader包，然后在webpack配置文件中进行配置，以cs-loader和style-loader为例，它们的作用分别是解析import导入的css文件和将css内容作为样式添加DOM中。

加载CSS

首先安装loader包

npm i -D css-loader style-loader

然后我们在src目录下新建css目录，用于存放所有的全局css样式文件，并在此创建index.css文件。

- src
	- css
		- index.css

并在该文件中添加css样式

.div {
	width: 50px;
	height: 50px;
	background: red;
}

这段css代码为类名为div的元素添加了样式，为了使之生效，我们需要创建这个元素。在入口文件index.js创建节点并添加到DOM。

const div = document.createElement("div");
div.className = "div";
document.body.appendChild(div);

打开开发者工具，可以发现节点已经被添加到DOM中，然后我们在入口文件index.js中import css文件。

import "./src/css/index.css";

可以发现不仅不生效，而且还报错了，这是因为webpack不支持解析该文件，这个时候就需要我们将之前说的css-style和style-loader配置到webpack中。

loader规则配置在module.rules对象下。

{
// ...
module: {
		// 创建解析规则
		rules: [
			{
				test: /\\.css$/,
				// include: [''], 
				// exclude: [./node_module],
				use: ["style-loader", "css-loader"],
			},
		],
	},

}

通过test匹配需要使用该规则的文件，这里使用了正则，例如上面代码中的test字段就是匹配所有的css尾缀的文件。

use字段是一个数组，里面传入需要使用的loader名称字符串即可。

这里要注意的是，use数组里的loader是从右向左执行的，也就是说需要先执行的loader放到数组的右边，例如上面代码中，先使用css-loader解决css文件的导入问题，然后在使用style-loader将css样式应用到DOM中。

除了test正则匹配特定的文件，还可以使用include指定文件或者使用exclude排除某些文件。