webpack-loader

# 什么是 loader

`loader` 的作用是将不同类型的文件转换为 `webpack` 可识别的模块。任何非 js 文件都必须被预先处理转换为 js 代码，才可以参与打包，`loader` 就是这样一个代码转换器。

`loader` 本质就是导出一个函数的 node 模块，[loader runner](https://github.com/webpack/loader-runner) 会调用这个函数，然后把上一个 `loader`产生的结果或者资源传进去。函数的 `this` 上下文是由 `webpack` 提供的。
```js
function Loader(source, sourceMap?, data?) {
  // source 为 loader 的输入，可能是文件内容，也可能是上一个 loader 处理结果
  return source;
};

module.exports = Loader
```

## loader 链式调用

可以在处理某种文件的时候配置多个 `loader`。

以处理 less 为例

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less/,
        // less 文件的处理顺序为先 less-loader 再 css-loader 再 style-loader
        use: [
          'style-loader',
          {
            loader:'css-loader',
            // 给 css-loader 传入配置项
            options:{
              minimize:true, 
            }
          },
          'less-loader'],
      },
    ]
  },
};
```

![image1](https://user-images.githubusercontent.com/24466870/189254446-bccebcac-2283-402a-8ddd-304b07a761ad.png)

可以看出来这是一个链式的调用。**但是他们会以相反的顺序执行，从下到上或者从右到左**

## loader 使用

在 `Webpack` 中，`loader` 可以被分为 4 类：pre 前置、post 后置、normal 普通和 inline 行内。其中 pre 和 post loader 可以通过 `rule` 对象的 `enforce` 属性来指定

### inline loader

```js
// 使用 ! 将资源中的 loader 分开。
import Styles from 'style-loader!css-loader?modules!./styles.css';
```

通过为内联 `import` 语句添加前缀，可以覆盖配置中的所有 `loader`

*   使用 `!` 前缀，将禁用所有已配置的 `normal loader`

```js
import Styles from '!style-loader!css-loader?modules!./styles.css';
```

*   使用 `!!` 前缀，将禁用所有已配置的 `loader`（preLoader, normal loader, postLoader）

```js
import Styles from '!!style-loader!css-loader?modules!./styles.css';
```

*   使用 `-!` 前缀，将禁用所有已配置的 `preLoader` 和 `loader`，但是不禁用 `postLoaders`

```js
import Styles from '-!style-loader!css-loader?modules!./styles.css';
```

可以给 `inline loader` 传参，`?key=value&foo=bar` 或者 `?{"key":"value","foo":"bar"}`，上面的例子中的 modules 就是参数

### pre Loader, normal loader, post Loader

顾名思义，指定了 `enforce` 属性的 `loader` 在执行时不是默认的从下到上（或从右到左）的顺序。

```js
// webpack.config.js
// 这里就是先执行 a-loader 再执行 b-loader 最后执行 c-loader
const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/i,
        use: ["a-loader"],
        enforce: "pre", // pre loader
      },
      {
        test: /\.txt$/i,
        use: ["b-loader"], // normal loader
      },
      {
        test: /\.txt$/i,
        use: ["c-loader"],
        enforce: "post", // post loader
      },
    ],
  },
};
```

## raw模式

`content` 可以是 `string` 或者 `Buffer`，在我们处理图片，音频，视频等这些文件的时候，我们就需要用到 `Buffer`，这时我们需要将 `row` 设为 `true`。

```js
module.exports = function (content) {
  assert(content instanceof Buffer);
  return someSyncOperation(content);
};
module.exports.raw = true
```

## pitch

首先我们的 `loader` 通常是到处一个函数

```js
function Loader(source, sourceMap?, data?) {
  // source 为 loader 的输入，可能是文件内容，也可能是上一个 loader 处理结果
  return source;
};

module.exports = Loader
```

同时我们可以在 `loader` 函数上添加一个 `pitch` 属性，它的值也是一个函数。它会比 `loader` 更早执行

```js
/**
 * @remainingRequest 剩余请求
 * @precedingRequest 前置请求
 * @data 数据对象
 */
Loader.pitch =  function (remainingRequest, precedingRequest, data) {
 //
};
```

可以通过 `data` 参数来进行数据传递，在 Normal loader 中就可以通过 `this.data` 的方式读取数据。

`loader` 执行链的执行过程分为三个阶段，`pitch`、解析资源、`loader`执行。

```javascript
// a-loader
module.exports = function(content) {
  return content;
};

module.exports.pitch = function(remainingRequest) {
  //
};
```

```javascript
// b-loader
module.exports = function(content) {
  return content;
};

module.exports.pitch = function(remainingRequest) {
  //
};
```

```javascript
// c-loader
module.exports = function(content) {
  return content;
};

module.exports.pitch = function(remainingRequest) {
  //
};
```

```javascript
module: {
    rules: [
      {
        test: /\.txt$/i,
        use: ["a-loader"，"b-loader", "c-loader"],
      },
    ],
  },
```

上面的例子的 `loader` 的执行顺序是
![image2](https://user-images.githubusercontent.com/24466870/189254518-2b2088ee-3c6d-46c2-92dd-b3c1d6aa42eb.png)

**而 `pitch` 的执行顺序是和 `loader` 执行顺序相反**，可以看成是顺序入栈倒序出栈

同时 `pitch` 还有一个重要功能：**阻断。**

还是上面的例子，只不过现在我们 b-loader 的 pitch 函数返回一个。

```js
// b-loader
module.exports = function(content) {
  return content;
};

module.exports.pitch = function(remainingRequest) {
  return '123';
};
```

&#x20;

现在的执行顺序就是

![image3](https://user-images.githubusercontent.com/24466870/189254544-ea141f98-dfaa-4033-ae97-6a41b207c79e.png)

**当 `pitch` 有返回（非 `undefined`），就会跳过后续 `pitch` 的执行，接着只执行之前执行了 `pitch` 相关联的 `loader`，而且 `b-loader` 的返回值也是 `pitch` 返回的值**

可以看出 `pitch` 提供了一个可以**阻断`loader`链执行**的方式。`style-loade`r 就用到了 `pitch`，在 `style-loader` 中，是没有`loader`内容的，只有 `loader.pitch`

```js
// style-loader
const loaderAPI = () => {};

loaderAPI.pitch = function loader(request) {
    // 
return someCode
}
```

这里就很奇怪了，为什么`style-loader`阻断了`loader`（`pitch` 有返回值）执行，但是我们写的样式依旧可以生效！

这是因为在 `style-loader` 的返回值里面返回了 `inline loader`。然后执行 `inline loader`返回的`css`字符串直接写进的`style`标签，然后再插入 `dom` 中

```js
// style-loader 返回内容中很重要的一段
// !! 禁用所有已配置的 loader
import content, * as namedExport from "!!css-loader-path!less-loader-path!./index.less";
```

所以我们使用 `less` 时，实际的`loader`执行顺序是：
第一次执行
![image4](https://user-images.githubusercontent.com/24466870/189254567-7ef7b33b-b972-46b6-952b-05f52cff4bdf.png)

第二次是`inline loader`执行

![image5](https://user-images.githubusercontent.com/24466870/189254584-9c8b6ef7-4626-4fda-829b-7f4b76e3a6a3.png)

并且第一次执行的时候是在`webpack`编译阶段，但是第二次执行则是在浏览器在加载 js 的时候执行。

### 为什么 style-loader 要这么设计

事实上 `style-loader` 这么设计是有原因的：
`style-loader` 会去操作 `dom` 元素（会给`dom`添加 `style` 标签）。但是在webpack编译阶段执行 `loader` 的过程中，是在 `nodejs` 环境，没有 `dom` 对象。所以才通过返回 `inline loader`执行，执行结果在通过 `style-loader` 处理添加到 `dom` 中。

## loader开发

### 本地开发调试

通过在 `rule` 对象设置 `path.resolve` 指向这个本地 `loader`

```js
{
  test: /\.js$/
  use: [
    {
      loader: path.resolve('path/to/loader.js'),
      options: {/* ... */}
    }
  ]
}
```

**匹配多个 `loaders`**, 可以使用 `resolveLoader.modules` 配置

```js
resolveLoader: {
  modules: [
    'node_modules',
    // 本地 loaders 目录
    path.resolve(__dirname, 'loaders')
  ]
}
```

或者通过 `npm link` 来关联到需要测试的项目

### loader API

#### `this.getOptions`

> 从 `webpack 5` 开始，`getOptions`可以在`loader`上下文中使用。替代`loader-utils` 中的 `getOptions`。

获取`loader`参数

```js
this.getOptions()
```

#### this.data

与 `pitch` 共享的数据

#### this.callback

`loader` 是可以通过 `return` 来返回处理结果，但是如果需要返回多个结果时，需要使用到 `callback API`。

```js
this.callback(
  err: Error | null,
  content: string | Buffer,
  sourceMap?: SourceMap,
  meta?: any // webpack 会忽略，loader 之间可以传输信息
);
```

#### this.async

异步`loader`

```js
async function Loader(source) {
  // 1. 获取异步回调函数
  const callback = this.async();
  
  let res;
  
  try {
    // 2. 调用less 将模块内容转译为 css
    res = await SomeAsync();
  } catch (error) {
    // ...
  }
  callback(null, res);
}
```

#### this.cachable

默认情况下，`loader`的结果都是被缓存的，传递 `false` 会让 `loader` 结果不缓存。

```js
this.cacheable(flag = true: boolean)
```

#### this.addDependency

添加依赖来监听，依赖项变化时，会重新编译生成缓存

```js
this.addDependency(file: string)
```

[更多](https://webpack.js.org/api/loaders#the-loader-context)

### 实现一个 txt-loader

```js
// txt-loader.js
module.exports = function loader(source) {
    return `module.exports = '${source}'`;
}
```

```js
// index.js
import Data from "./data.txt"

const msgElement = document.querySelector("#message");
msgElement.innerText = Data;
```

### 实现极简 babel-loader

```js
// simple-babel-loader.js
const core = require('@babel/core');

module.exports = function loader(source) {
    const options = this.getOptions() || {};
    const callback = this.async();
    core.transform(source, options, function (err, result) {
        if (err) {
            callback(err);
        } else {
            callback(null, result.code);
        }
    });
}
```

### 工具

*   需要了解 [loader-runner](https://github.com/webpack/loader-runner)
*   [loader-utils](https://github.com/webpack/loader-utils)
*   [schema-utils](https://github.com/webpack/schema-utils)（options 验证库）
*   [loader 内部 api](https://webpack.js.org/api/loaders#the-loader-context)

### 注意事项

当 loader 用来解析非 js 文件到 js 文件时，最后返回的代码是需要添加`module.exports` 或者 `export default`字符串，这样外界在导入模块的时候就可以接收到这个HTML字符串。

```js
 return `module.exports = ${JSON.stringify(someString)}`
 // or
 // 有 callback 就不需要 return
 this.callback(null, `module.exports = ${JSON.stringify(someString)}`)
```

## [代码实现](https://github.com/zzkkui/webpack-loader)

## 参考

*   <https://webpack.js.org/contribute/writing-a-loader>
*   <https://juejin.cn/post/6992754161221632030>



Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

webpack-loader #73

什么是 loader

loader 链式调用

loader 使用

inline loader

pre Loader, normal loader, post Loader

raw模式

pitch

为什么 style-loader 要这么设计

loader开发

本地开发调试

loader API

`this.getOptions`

this.data

this.callback

this.async

this.cachable

this.addDependency

实现一个 txt-loader

实现极简 babel-loader

工具

注意事项

代码实现

参考

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

webpack-loader #73

Description

什么是 loader

loader 链式调用

loader 使用

inline loader

pre Loader, normal loader, post Loader

raw模式

pitch

为什么 style-loader 要这么设计

loader开发

本地开发调试

loader API

this.getOptions

this.data

this.callback

this.async

this.cachable

this.addDependency

实现一个 txt-loader

实现极简 babel-loader

工具

注意事项

代码实现

参考

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`this.getOptions`