一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。
前言
我们前面说到了，webpack其实只能识别js，对于其他的语言或者资源，识别不了，详见webpack初体验（一）。我们可以通过配置loader来对模块的不同类型源码进行转换。loader是在通过import阶段就会预处理文件。例如：loader会将所有的内联图片转换成data URL或者可以在js中直接importcss文件，因为在import的时候就会处理。
使用loader
当前webpack提供三种使用loader的方式:
- 通过
webpack.config.js配置，通过在module.rules中配置多个loader。例如：
module.export = {
module:{
rules:[{
test:'/\.css$/',
use:'css-loader'
}]
}
}
此配置说明将所有的css文件通过css-loader处理。
- 在每个
import语句中显式的指定所需要的loader。听过!将所需要的loader隔开。例如：
import Styles from 'style-loader!css-loader?modules!./styles.css';
此配置说明将styles.css通过style-loader，css-loader,modules三个loader进行处理
- 在
shell命令中指定。例如：
webpack --module-bind 'css=style-loader!css-loader'
此配置说明对css文件使用style-loader和css-loader。
以上是使用loader的三种方式，但是推荐使用第一种方式。因为更容易扩展和可读以及维护。
配置
在webpack.config.js中我们需要将loader配置到module.rules数组中。可以指定多个loader。具体的使用过程如下：
我们以使用css-loader和style-loader为例
- 安装
loader
我们在使用具体的loader的时候必须先安装对应的loader。通过npm安装即可
npm install -d css-loader
npm install -d style-loader
- 使用
loader
我们上面说到了，我们的loader需要配置到module.rules中。其配置为一数组。其具体的数据格式为：
rules:Array<{
test:string|正则|Function|Array|Object;
use:Array<{
loader:string;
options?:Object
}>
}>
从上面的数据格式，我们可以看出，每一项我们都必须有两个配置test和use。其中test是条件，是说明那些模块需要被处理。use是工具，是需要用那些loader来处理test匹配的模块。其中use又有一个必须的配置那就是具体的loader名。所以针对.css文件的loader的配置如下：
module.export = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
}
loader特性
通过上面的说明以及配置我们其实可以总结出loader的一些特性，那就是：
-
loader是支持链式传递的。例如内联使用以及配置使用的时候。我们可以配置一组loader。按照配置的先后顺序进行处理模块。规则是从右往左边执行。只到处理完成 -
能够对特殊的
loader进行配置。按照上面的数据格式我们可以看出，我们可以通过options针对不同的loader配置不同的配置。 -
loader是支持同步也支持异步的。当我们使用async-loader的时候我们就能体会异步loader了。
这3个特性是我们上面的说明中能够得知到的loader特性。当然loader还有其他特性，例如：
-
loader运行在Node.js中，并且能够执行任何可能的操作。 -
loader接收查询参数。用于对loader传递配置。 -
除了使用
package.json常见的main属性，还可以将普通的npm模块导出为loader，做法是在package.json里定义一个 loader 字段。 -
插件(plugin)可以为
loader带来更多特性。 -
loader能够产生额外的任意文件。
上面的5个特性我们需要通过后续的实例一一来说明。
以上就是loader的基础使用方法，后续我们将会说到如何编写一个loader.下一章我们将会介绍下我们常见以及常用的一些loader.
