如何为我自定义的webpack loader添加sourcemap？

基础实现思路 #

loader执行初始阶段先缓存待处理文件的原始内容，后续捕获到错误、触发警告时，直接读取缓存的原始内容拼接上下文输出即可，不需要依赖额外第三方工具。

具体实现步骤 #

1. 缓存原始代码
   loader执行的第一个入参就是文件的原始内容字符串，在逻辑最开始将其存入独立变量，后续转换逻辑不要修改该变量：

module.exports = function (source) {
  // 缓存原始代码，全程不要修改该变量
  const originalSource = source
  const callback = this.async()
  try {
    // 你的自定义代码转换逻辑
    const transformedCode = yourCustomTransform(source)
    callback(null, transformedCode)
  } catch (err) {
    // 捕获转换阶段错误，传入原始代码打印
    printError(originalSource, err)
    callback(err)
  }
}

2. 错误信息拼接原始代码上下文
   以下是通用的错误打印函数示例，支持定位到错误所在的行号列号，同时输出错误行前后3行的代码上下文：

function printError(originalSource, error) {
  const { line, column, message } = error
  const codeLines = originalSource.split('\n')
  // 控制展示的上下文行数，可自行调整
  const startLine = Math.max(0, line - 3)
  const endLine = Math.min(codeLines.length, line + 3)
  console.error(`[转换错误] ${message}\n原始代码上下文：`)
  for (let i = startLine; i < endLine; i++) {
    const currentLineNum = i + 1
    const linePrefix = currentLineNum === line ? `> ${currentLineNum} | ` : `  ${currentLineNum} | `
    console.error(linePrefix + codeLines[i])
    // 错误列位置标记
    if (currentLineNum === line && column !== undefined) {
      console.error(' '.repeat(linePrefix.length + column) + '^')
    }
  }
}

3. 警告场景实现
   如果是需要触发构建警告，直接调用loader内置的this.emitWarning方法，将原始代码片段拼接到警告信息中即可：

// 在loader逻辑中
if (needWarnCondition) {
  const warnContent = `[自定义警告] 存在不兼容语法，对应原始代码片段：\n${originalSource.slice(startPos, endPos)}`
  this.emitWarning(new Error(warnContent))
}

进阶优化 #

如果你的转换逻辑会修改代码的行号结构，建议同步生成sourceMap，报错时通过sourceMap反查原始代码的对应位置，保证定位准确性。

内容的提问来源于stack exchange，提问作者user14716861