1 . loader 执行顺序
1 . 1 优先级分类:
- pre:前置 loader
- normal:普通 loader
- inline:内联 loader
- post:后置 loader
1 . 2 执行顺序:
- pre > normal > inline > post
- 相同优先级执行顺序为:
从右到左,从上到下
2 . 使用 loader 方式:
2 . 1 配置模式: 在 webpack.js 文件中指定 loader。
2 . 2 内联模式: 在每个 import 语句中显示指定 loader
import Styles from 'style-loader!css-loader?modules!./styles.css';
含义: 使用 css-loader和style-loader处理style.css 文件
3 . 自定义 loader
loader本身是一个函数,接收要处理的文件,然后返回处理后的文件!!!!
参数有三个:
- content:接收要处理的文件
- map:跟 SourceMap 有关的数据
- meta:别的 loader 传递过来的数据
4 . loader 的四种定义方式
- 同步 loader
- 异步 loader
- raw loader
- pitch loader
4 . 1 同步 loader: 两种写法
- callback 在 loader 干完后执行。可返回多个结果的函数!!
4 . 2 异步 loader:
采用 async() 方法,返回 callback()方法
- 注意:
同步操作不能执行异步(如 setTimeout )的操作
4 . 3 law loader:
就是在暴露出去的 loader 函数中加一个 law 属性,并赋值为 true 。这样 loader 函数接收到的 conten 参数就会是buffer二进制形式的。(通常一些处理图片的 loader 会用)
- 采用同步、异步都可以!!!
4 . 4 pitch loader:
就是在暴露出去的 loader 函数中加一个 pitch 方法,该 pitch 方法会在 loader 函数执行前先执行。
-
比如,相同优先级的 loader1 、loader2 、loader3 ,因为 normal loader 是从下到上执行的。所以会: 先执行 pitch1 、pitch2 、pitch3,再执行 loader3 、loader2 、loader1。
-
一旦在 pitch 方法中 return 了,就不会再执行后面的 pitch 了。(如在 pitch2 中 return了 )