前言
- 上一篇loader没完,这篇继续。
Pitch顺序
-
loader正常来说是倒着走的,但那只是正常的loader,其实loader分成2部分,一部分是Normal一部分是Pitch。
-
先配置3个loader,然后验证下顺序:
test: /\.js$/,
use: [
{
loader: 'myloader'
},
{
loader: 'myloader2'
},
{
loader: 'myloader3'
},
],
- loader:
function myloader(source) {
console.log('1normal')
return source
}
myloader.pitch = function () {
console.log('1pitch')
}
module.exports = myloader
- 每个loader都会console一下,最后结果是:
1pitch
2pitch
3pitch
3normal
2normal
1normal
- 另外,说一下取资源文件的位置,走到最后一个pitch后才拿到资源文件,然后走3normal。
- 这个是正常情况,那么如果其中pitch返回了呢?
- 不太好演示,直接说答案,如果pitch有返回,那么直接跳到前一个的normal,也就是如果2pitch返回一个字符串
222
,那么不走3pitch了,直接走1normal,而因为没有拿资源文件,所以1normal的source是2pitch的返回结果。
loader顺序配置
- loader除了正常顺序,还有一些顺序配置,这样使得loader的顺序更灵活。
- webpack配置:
{
test: /\.js$/,
use: [
{
loader: 'myloader'
},
{
loader: 'myloader2'
},
{
loader: 'myloader3'
},
],
exclude: /node_modules/,
},
{
test: /\.js$/,
enforce: 'pre',
use: [
{
loader: 'preloader'
}
],
exclude: /node_modules/,
},
{
test: /\.js$/,
enforce: 'post',
use: [
{
loader: 'postloader'
}
],
exclude: /node_modules/,
}
- 行内loader配置:
require('inline-loader1!inline-loader2!./index.js')
console.log('yehuozhili')
- 最后打印顺序:
postLoaderpitch
1pitch
2pitch
3pitch
preloaderpitch
preloadernormal
3normal
2normal
1normal
postLoadernormal
postLoaderpitch
inlineLoader1pitch
inlineLoader2pitch
1pitch
2pitch
3pitch
preloaderpitch
preloadernormal
3normal
2normal
1normal
inlineLoader2normal
inlineLoader1normal
postLoadernormal
- 可以看见,配置了行内Loader后,执行了其它loader走了2遍。当然这个也可以控制,后面再说。
Pitch参数
- 如果没参数,光上面那行为就感觉好像没什么卵用。pitch有3个参数
function myloader2(source) {
console.log('2normal')
return source
}
myloader2.pitch = function (remainingRequest, previousRequest, data) {
console.log(remainingRequest)
console.log('2pitch')
console.log(previousRequest)
console.log(data)
}
module.exports = myloader2
- 其中remainingRequest和previousRequest都是由感叹号连接的执行顺序的绝对地址。代表剩余几个loader没走和先前走了几个loader。
- 这个pitch的剩余和先前是对于pitch执行顺序来说的。
- 最后一个data参数,可以给其赋值,然后loader通过this.data获取。