JavaScript 中怎么在 Webpack 中编写自定义 loader 转换特定文件-js教程-PHP中文网

webpack 中自定义 loader 是处理非标准模块的关键，本质为导出函数的 node.js 模块，接收源码并返回 js 代码；需支持同步/异步、缓存、选项读取及依赖追踪，且运行在 node 环境。

javascript 中怎么在 webpack 中编写自定义 loader 转换特定文件

在 Webpack 中编写自定义 loader 是处理非标准模块（如 `.md`、`.svg`、`.txt` 或私有格式）的关键能力。loader 本质是一个导出函数的 Node.js 模块，接收源文件内容，返回转换后的 JavaScript 代码（或可被后续 loader 处理的内容）。

loader 的基本结构与执行时机

Webpack 在构建时，对匹配到的每个模块依次调用配置中声明的 loader（从右到左、从下到上）。loader 函数接收源码字符串（或 Buffer），可同步或异步返回处理结果。它运行在 Node.js 环境，不能直接访问浏览器 API。

必须导出为函数（支持 CommonJS 或 ESM，默认 CommonJS）
函数第一个参数是资源内容（string 或 Buffer），可通过 this.cacheable() 启用缓存
使用 this.callback() 支持异步（如读取外部文件、调用 API），或直接 return 同步结果
可通过 this.resourcePath 获取当前文件路径，this.query（旧版）或 this.getOptions()（推荐）读取 loader 参数

编写一个简单的 Markdown 转 HTML loader

以将 .md 文件转成包含 HTML 字符串的 JS 模块为例：

// markdown-loader.js
const marked = require('marked');

module.exports = function(source) {
  this.cacheable && this.cacheable();
  
  const html = marked(source);
  // 返回 JS 模块：export default "<h1>Hello</h1>"
  return `export default ${JSON.stringify(html)};`;
};

在 webpack.config.js 中配置：

module: {
  rules: [
    {
      test: /\.md$/,
      use: path.resolve(__dirname, 'markdown-loader.js')
    }
  ]
}

这样 import content from './readme.md' 就能得到渲染后的 HTML 字符串。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

支持选项与异步操作（如加载远程资源）

更健壮的 loader 应兼容 options 并处理异步场景。例如一个读取并内联 SVG 的 loader：

// svg-inline-loader.js
const { getOptions } = require('loader-utils');
const fs = require('fs').promises;

module.exports = async function(source) {
  const options = getOptions(this) || {};
  const { inline = true } = options;

  if (inline && this.resourcePath.endsWith('.svg')) {
    try {
      const svgContent = await fs.readFile(this.resourcePath, 'utf8');
      return `export default ${JSON.stringify(svgContent)};`;
    } catch (e) {
      this.emitError(e);
      return `export default "";`;
    }
  }

  return source;
};

使用时传参：use: [{ loader: './svg-inline-loader.js', options: { inline: true } }]。

调试与发布技巧

开发阶段建议：

用 this.addDependency(filePath) 告诉 Webpack 监听额外依赖（如 loader 内部读取的模板文件）
用 this.emitWarning() 或 this.emitError() 输出提示信息
本地测试可用 require('!!./my-loader!./test.txt')（双感叹号禁用 config 中其他 loader）
发布前写好 package.json，设置 "main": "index.js"，并添加 "engines": { "node": ">=14" }