为什么webpack --watch会触发自定义loader处理无关文件？

这是配置问题，不属于Webpack或ts-loader的bug。根本原因是你为.txt规则配置的ts-loader默认会扫描项目内所有TypeScript类型文件（包括.ts、.d.ts），在watch模式下触发增量编译时，Webpack的规则匹配逻辑会误将这些非.txt文件传递给你的自定义loader执行，导致校验抛错。

提供两种可行方案，按需选择即可：

方案1：给自定义loader添加后缀校验 #

在txt-loader入口先判断处理文件的后缀，仅对.txt文件执行你的业务逻辑，其余文件直接返回原内容即可，修改后的txt-loader.js如下：

module.exports = function TxtLoader(txt) {
  // 仅处理.txt后缀的文件
  if (!this.resourcePath.endsWith('.txt')) {
    return txt
  }
  console.log(`TxtLoader invoked on ${this.resourcePath} with content ${JSON.stringify(txt)}`)
  if (txt.indexOf('Hello') < 0) {
    throw new Error(`No "Hello" found`)
  }
  return `export const TEXT: string = ${JSON.stringify(txt)}`
}

方案2：给ts-loader添加仅编译打包文件的配置 #

在.txt对应的ts-loader配置中添加onlyCompileBundledFiles: true，避免ts-loader扫描项目内未被直接引入打包的TS文件，从根源上避免多余的编译触发，修改后的webpack.config.js对应规则如下：

{
  test: /\.txt$/,
  use: [
    {
      loader: 'ts-loader',
      options: { 
        appendTsSuffixTo: [/\.txt$/],
        onlyCompileBundledFiles: true
      },
    },
    path.resolve('txt-loader.js'),
  ],
}

两种方案都可以解决watch模式下loader被误调用的问题，方案1兼容更多场景，方案2不需要修改自定义loader代码，性能更好。

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