一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第21天,点击查看活动详情。
前言
我们前面说到了,webpack其实只能识别js,对于其他的语言或者资源,识别不了,详见webpack初体验(一)。我们可以通过配置loader
来对模块的不同类型源码进行转换。loader
是在通过import
阶段就会预处理文件。例如:loader
会将所有的内联图片转换成data URL
或者可以在js中直接import
css文件,因为在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
.