Webpack -- 23 loader 原理

112 阅读1分钟

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。

1135.png

2 . 2 内联模式: 在每个 import 语句中显示指定 loader

import Styles from 'style-loader!css-loader?modules!./styles.css';

含义: 使用 css-loaderstyle-loader处理style.css 文件

1136.png

3 . 自定义 loader

loader 本身是一个函数,接收要处理的文件,然后返回处理后的文件!!!!

参数有三个:

  • content:接收要处理的文件
  • map:跟 SourceMap 有关的数据
  • meta:别的 loader 传递过来的数据

4 . loader 的四种定义方式

  • 同步 loader
  • 异步 loader
  • raw loader
  • pitch loader

4 . 1 同步 loader: 两种写法

1138.png

  • callback 在 loader 干完后执行。可返回多个结果的函数!!

4 . 2 异步 loader:

采用 async() 方法,返回 callback()方法

1139.png

  • 注意:

同步操作不能执行异步(如 setTimeout )的操作

4 . 3 law loader:

就是在暴露出去的 loader 函数中加一个 law 属性,并赋值为 true 。这样 loader 函数接收到的 conten 参数就会是buffer二进制形式的。(通常一些处理图片的 loader 会用)

1140.png

  • 采用同步、异步都可以!!!

4 . 4 pitch loader:

就是在暴露出去的 loader 函数中加一个 pitch 方法,该 pitch 方法会在 loader 函数执行前先执行。

  • 比如,相同优先级的 loader1 、loader2 、loader3 ,因为 normal loader 是从下到上执行的。所以会: 先执行 pitch1 、pitch2 、pitch3,再执行 loader3 、loader2 、loader1。

  • 一旦在 pitch 方法中 return 了,就不会再执行后面的 pitch 了。(如在 pitch2 中 return了 )

1142.png

1141.png

5 . loader 的 API

1143.png