谈下 webpack loader 的机制

最新推荐文章于 2024-05-31 13:59:44 发布

HZFEStudio

最新推荐文章于 2024-05-31 13:59:44 发布

阅读量533

点赞数 1

文章标签： javascript webpack 前端面试

本文链接：https://blog.csdn.net/HZFEStudio/article/details/120580006

版权

本文深入探讨了 webpack loader 的工作原理，包括如何编写同步和异步 loader，以及 loader 的核心工具 loaderUtils。同时，详细解析了常见 loader 如 raw-loader、babel-loader 和 style-loader 与 css-loader 的操作。在 webpack 配置中，loader 按照从后往前的顺序执行，而 pitch 阶段则从前往后执行。loader 为 webpack 提供了处理各种类型文件的能力，使构建过程更加灵活。

摘要由CSDN通过智能技术生成

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview

完整高频题库阅读地址：https://febook.hzfe.org/

回答关键点

转换 生命周期 chunk

webpack 本身只能处理 JavaScript 和 JSON 文件，而 loader 为 webpack 添加了处理其他类型文件的能力。loader 将其他类型的文件转换成有效的 webpack modules（如 ESmodule、CommonJS、AMD），webpack 能消费这些模块，并将其添加到依赖关系图中。

loader 本质上是一个函数，该函数对接收到的内容进行转换，返回转换后的结果。

常见的 loader 有：

raw-loader：加载文件原始内容。
file-loader：将引用文件输出到目标文件夹中，在代码中通过相对路径引用输出的文件。
url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式将文件内容注入到代码中。
babel-loader：将 ES 较新的语法转换为浏览器可以兼容的语法。
style-loader：将 CSS 代码注入到 JavaScript 中，通过 DOM 操作加载 CSS。
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性。

使用 loader 的方式主要有两种：

在 webpack.config.js 文件中配置，通过在 module.rules 中使用 test 匹配要转换的文件类型，使用 use 指定要使用的 loader。

module.exports = {
   
  module: {
   
    rules: [{
    test: /\.ts$/, use: "ts-loader" }],
  },
};

内联使用

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

知识点深入

1. 编写 webpack loader

1.1 同步 loader

同步转换内容后，可以通过 return 或调用 this.callback 返回结果。

export default function loader(content, map, meta) {
   
  return someSyncOperation(content);
}

通过 this.callback 可以返回除内容以外的其他信息（如 sourcemap）。

export default function loader(content, map, meta) {
   
  this.callback(null, someSyncOperation(content), map, meta);
  return; // 当调用 callback() 时，始终返回 undefined
}

1.2 异步 loader

通过 this.async 可以获取异步操作的回调函数，并在回调函数中返回结果。

export default function (content, map, meta) {
   
  const callback = this.async();
  someAsyncOperation(content, (err, result, sourceMaps, meta) => {
   
    if (err) return callback(err);
    callback(null, result, sourceMaps, meta);
  });
}

除非计算很小，否则对于 Node.js 这种单线程环境，尽可能使用异步 loader。

1.3 loader 开发辅助工具及 loaderContext

loader-utils 与 schema-utils，可以使获取及验证传递给 loader 的参数的工作简单化。

import {
    getOptions } from "loader-utils";
import {
    validate } from "schema-utils";

const schema = {
   
  type: "object",
  properties: {
   
    test: {
   
      type: "string",
    },
  },
};

export default function (source) {
   
  const options = getOptions(this);

  validate(schema, options, {
   
    name: "Example Loader"