本节介绍Webpack loader并进行简单使用讲解。
一、Webpack loader简介
Loader是Webpack生态里一个重要的组成，我们一般称之为预处理器。
Webpack在进行打包的时候，对所有引入的资源文件，都当作模块来处理。
但Webpack自身只支持对JS文件处理（现在的版本也支持对JSON文件处理），如果你引入了一个CSS文件或图片文件，那么Webpack在处理该模块的时候，会在控制台报错：Module parse failed…You may need an appropriate loader to handle this file type.
控制台告诉你模块解析失败，你需要你个合适的loader来处理该文件类型。
当Webpack自身无法处理某种类型的文件的时候，我们就可以通过配置特定的loader，赋予Webpack来处理该类型文件的能力。
二、Webpack loader使用
我们来看一个例子。
配套代码是github仓库 https://github.com/jruit/webpack-tutorial 的webpack1-3例子
新建项目文件夹名是webpack1-3，然后执行下面的命令初始化项目
npm init -y
新建相应的文件，目录结构如下。
|--a.js
|--b.css
|--index.html
|--package.json
|--webpack.config.js
b.css声明了.hello类，该类的文字颜色是蓝色;
a.js引入了b.css;
webpack.config.js是Webpack的配置文件，从a.js入口打包，输出bundle.js文件；
index.html引入了打包后的bundle.js文件，并且有一个clss为hello，内容是Hello, Loader的div。
a.js
import './b.css'
b.css
.hello {
margin: 30px;
color: blue;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="bundle.js"></script>
</head>
<body>
<div class="hello">Hello, Loader</div>
</body>
</html>
webpack.config.js
const path = require('path');
module.exports = {
entry: './a.js',
output: {
path: path.resolve(__dirname, ''),
filename: 'bundle.js'
},
mode: 'none'
};
与快速入门一节一样，我们安装webpack
npm install --save-dev webpack@4.43.0 webpack-cli@3.3.12
然后执行npx webpack打包，这个时候报错了，提示我们需要安装相应的loader来处理CSS文件。
这里我们安装两个loader，分别是css-loader与style-loader。
其中css-loader是必需的，它的作用是解析CSS文件，包括解析@import等CSS自身的语法。它的作用也仅仅是解析CSS文件，它会把CSS文件解析后，以字符串的形式打包到JS文件中。不过，此时的CSS样式并不会生效，因为我们需要把CSS插入到html里才会生效。
此时，style-loader就来发挥作用了，它可以把JS里的样式代码插入到html文件里。它的原理很简单，就是通过JS动态生成style标签插入到html文件的head标签里。
我们来安装这两个loader
npm install css-loader@3.6.0 style-loader@1.2.1
webpack.config.js里配置上这两个loader
const path = require('path');
module.exports = {
entry: './a.js',
output: {
path: path.resolve(__dirname, ''),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
mode: 'none'
};
可以看到，我们需要对配置项新增module，该项是一个对象，其rules里是我们对各个类型文件的处理规则配置。
test值是一个正则表达式，表示当文件名后缀是.css的时候，我们使用对应use项里的loader。
use值是一个数组，每一项是一个loader。loader的执行顺序是从后向前执行，先执行css-loader，然后把css-loader执行的结果交给style-loader执行。
现在我们执行npx webpack来完成打包，然后在浏览器打开index.html，发现CSS生效了，文字颜色变成蓝色。
三、小结
1.loader就是帮助Webpack来处理各种类型文件的，其执行顺序是从后向前。后续章节我们会学习到前端开发中必用的loader；
注
1.你也许想问，css-loader为何不增加功能，完成对CSS解析后，自动插入到html里？这是因为在线上环境里，我们一般需要把CSS提取到单独的CSS文件里，如果css-loader把样式插入到了html，反而坏事了。在对线上环境打包的时候，我们就不需要style-loader了，而是通过插件把CSS提取处理。关于插件的内容，在后续章节讲解。
虽然现在两点了，但是还在学习您写的教程~
您写的教程由浅入深，文笔很流畅，简直是发现了宝藏！
我也刚刚在京东上下单了您的新书，最近在找工作总是因为webpack没接触过被刷掉，希望这次能够通过您的教程和书可以顺利找到工作。
最后还是要说：听我说，谢谢你...
哈哈，祝一切顺利