webpack的loader原理是怎样的？

1. loader是做什么的？

帮助webpack 将不同类型的文件转换为 webpack 可识别的模块。

2. loader 执行顺序

2.1 分类

• pre：前置 loader
• normal：普通 loader
• inline：内联 loader
• post：后置 loader

2.2 执行顺序

• 4类loader 的执行优先级为：pre > normal > inline > post
• 相同优先级的 loader 执行顺序为：从右到左，从下到上

栗子：

// 此时loader执行顺序：loader3 - loader2 - loader1
module: {
  rules: [
    {
      test: /\.js$/,
      loader: "loader1",
    },
    {
      test: /\.js$/,
      loader: "loader2",
    },
    {
      test: /\.js$/,
      loader: "loader3",
    },
  ],
},

// 此时loader执行顺序：loader1 - loader2 - loader3
module: {
  rules: [
    {
      enforce: "pre",
      test: /\.js$/,
      loader: "loader1",
    },
    {
      // 没有enforce就是normal
      test: /\.js$/,
      loader: "loader2",
    },
    {
      enforce: "post",
      test: /\.js$/,
      loader: "loader3",
    },
  ],
},

2.3 使用 loader 的方式

• 配置方式：在 webpack.config.js文件中指定 loader。(pre、normal、post loader)
• 内联方式：在每个 import 语句中显示指定 loader。（inline loader）

2.4 inline loader

用法：import Styles from 'style-loader!css-loader?modules!./styles.css'

含义：

• 使用 css-loader 和 style-loader 处理 styles.css 文件
• 通过 ! 将资源中的 loader 分开 inline loader 可以通过添加不同前缀，跳过其他类型 loader。
• ! 跳过 normal loader import Styles from '!style-loader!css-loader?modules!./styles.css';
• -! 跳过 pre 和 normal loader import Styles from '-!style-loader!css-loader?modules!./styles.css'
• !! 跳过 pre、normal 和 post loader import Styles from '!!style-loader!css-loader?modules!./styles.css;'

3. 编写 loader

3.1 人生中第一个 loader

module.exports = function loader1(content) {
    console.log("hello loader")
    return content
}

它接受要处理的源码作为参数，输出转换后的js代码。

3.2 loader接受的参数

• content 源文件的内容
• map SourceMap 数据
• meta 数据，可以是任何内容

4. loader分类

4.1 同步 loader

module.exports = function loader1(content) {
    console.log("hello loader")
    return content
}

this.callback 方法则更灵活，因为它允许传递过个参数，而不仅仅是content

module.exports = function (content, map, meta) {
  // 传递map，让source-map不中断
  // 传递meta，让下一个loader接收到其他参数
  this.callback(null, content, map, meta);
  return; // 当调用 callback() 函数时，总是返回 undefined
};

4.2 异步 loader

module.exports = function (content, map, meta) {
    const callback = this.async()
    // 进行异步操作
    setTimeout(() => {
        console.log("异步loader")
        callback(null, content, map, meta)
    }, 2000)
}

由于同步计算过于耗时，在Node.js 这样的单线程环境下进行此操作并不是好的方案，我们建议尽可能地使你的 loader 异步化。但如果计算量很小，同步loader 也是可以的。

4.3 Raw Loader

默认情况下，资源文件会被转化为 UTF-8字符串，然后传给 loader。通过设置 raw 为true，loader 可以接受原始的 Buffer。

module.exports = function (content) {
    // content 是一个 Buffer数据
    return content
}
module.exports.raw = true // 开启 Raw Loader

4.4 Pitching Loader

module.exports = function (content) {
    console.log("normal loader", this.data.value)
    return content
}
module.exports.pitch = function (remainingRequest, precedingRequest, data) {
    console.log("pitch loader")
    data.value = 42  // 这里设置值，可以在normal loader中的this.data 中获取到
}
}

webpack会先从左到右执行loader 链中的每个 loader 上的 pitch 方法（如果有），然后再从右到左执行 loader 链中的每个 loader 上的普通 loader 方法。

在这个过程中如果任何 pitch 有返回值，则 loader 链被阻断。webpack 会跳过后面所有的 pitch 和 loader，直接进入上一个 loader。

loader 常用API

方法名	含义	用法
this.async	异步回调 loader。返回 this.callback	const callback = this.async()
this.callback	可以同步或者异步调用的并返回多个结果的函数	this.callback(err, content, sourceMap?, meta?)
this.getOptions(schema)	获取 loader 的 options	this.getOptions(schema)
this.emitFile	产生一个文件	this.emitFile(name, content, sourceMap)
this.utils.contextify	返回一个相对路径	this.utils.contextify(context, request)
this.utils.absolutify	返回一个绝对路径	this.utils.absolutify(context, request)

更多内容，请参考webpack官方 loader api 文档

5. 实战手写 loder

5.1 clean-log-loader

作用：用来清理 js 代码中的 console.log

module.exports = (content) => {
    // 将console.log替换为空
    return content.replace(/console\.log\(.*\);?/g, "")
}

5.2 banner-loader

作用：给js代码添加文本注释

• loaders/banner-loader/index.js

const schema = require("./schema.json");

module.exports = function (content) {
  // 获取loader的options，同时对options内容进行校验
  // schema是options的校验规则（符合 JSON schema 规则）
  const options = this.getOptions(schema);

  const prefix = `
    /*
    * Author: ${options.author}
    */
  `;

  return `${prefix} \n ${content}`;
};

• loaders/banner-loader/schema.json

{
  "type": "object",
  "properties": {
    "author": {
      "type": "string"
    }
  },
  "additionalProperties": false
}