load

2025年01月22日

柏拉文

越努力，越幸运

一、认识

---

load Hooks: load(id) 加载虚拟模块的内容。常用于动态生成虚拟模块。在模块被请求时，load 钩子会被调用。load 可以返回虚拟模块的内容，通常用于生成一些动态的模块内容，避免在文件系统中创建实际的文件。例如，生成 CSS 或 JavaScript 模块。 load Hooks 在 Webpack 的实现逻辑为: 向 compiler.options.module.rules.unshift Loader 配置的最前面插入用于处理虚拟模块的 Loader, 并将 enforce: "pre", 该 loader 应该在所有其他类型的 loader 之前执行，尤其是在标准 loader 运行之前。在其他 loader 处理之前识别虚拟模块。在这个 Loader 中可以插入自定义的虚拟模块内容。

二、语法

---

const unplugin = require('unplugin');

const plugin = unplugin.createUnplugin((options = {}) => {
  return {
    name: 'my-plugin',

    load(id) {
        if (id === 'virtual:/foo') {
            return `export default 'This is a virtual module!';`;
        }
        return null;
    }

  };
});

• id：模块的 ID（即路径）。