【webpack】webpack构建流程笔记（四）

前言

• 上一篇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获取。