一文大白话讲清楚webpack进阶——3——Loader的执行顺序(pre,normal,inline,post)

一文大白话讲清楚webpack进阶——3——Loader的执行顺序(pre,normal,inline,post)

1. loader的分类和执行顺序

• 在配置rules时，我们配置了很多的loader，但一般不指明loader的类型，其实loader是有分类的，loader的类型决定loader的执行顺序

1.1 pre

• 前置loader，优先级最高

1.2 normal

• 普通loader，优先级次之

1.3 inline

• 内联loader，优先级再次之

1.4 post

• 后置loader，优先级最低

1.5 相同优先级

• 相同优先级的loader，按照从右到左，从上到下的顺序执行

2. 如何制定分类

2.1 非inline

• 我们在配置loader的时候，通过enforce属性指定

module.exports={
    module:{
        rules:[
            {
                enforce:'pre',//指定为loader类型，默认为normal类型
                test:/\.css/,
                loader:['style-loader','css-loader']
            }
        ]
    }
}

2.2 inline

• 先说啥事内联loader，就是在import的时候指明使用的loader

import style from 'style-loader!css-loader?modules!./index.css'

• 多个loader用感叹号分来，如果要给loader传递参数，就用问号拼接，跟url传参一个道理
• 使用内联loader会有一个重复问题，就是我们在配置文件里面已经配置了css的规则，然后在import时又指明了一次，这样就会造成重复。
• 好在内联loader通过添加前缀可以解决这个问题

2.2.1 禁用普通loader

• 可以在loader前面加感叹号，表示禁用已配置的normal类型的loader

import style from '!style-loader!css-loader?modules!./index.css'

2.2.2 禁用所有loader

• 可以在loader前面加双感叹号，表示禁用所有已配置的loader

import style from '!!style-loader!css-loader?modules!./index.css'

2.2.3 禁用非post类型loader

• 可以在loader前面加-！,表示禁用所有非post类型的loader

import style from '-!style-loader!css-loader?modules!./index.css'