为何ts-loader会导致html-webpack-plugin出现TS2306错误？

这个问题我之前碰到过，本质是TypeScript编译器与webpack loader的配置没配合到位——虽然你的业务TS文件编译成功了，但ts-loader意外地去处理了node_modules里html-webpack-plugin依赖的lodash文件，从而抛出了这个错误。下面给你几个可行的解决步骤：

1. 确保tsconfig.json正确排除node_modules #

TypeScript自身的编译配置如果没有排除node_modules，即使webpack的loader规则里加了exclude，TS编译器还是会扫描这些第三方依赖文件。打开你的tsconfig.json，确认包含以下配置：

{
  "compilerOptions": {
    // 你的其他编译选项
  },
  "exclude": ["node_modules"]
}

2. 收紧webpack中ts-loader的处理范围 #

在webpack配置里，给ts-loader加上include规则，明确只处理src目录下的TS/TSX文件，避免误处理node_modules里的内容：

module.exports = {
  // 其他配置
  module: {
    rules: [
      { 
        test: /\.tsx?$/, 
        use: "ts-loader", 
        include: [path.resolve(__dirname, "src")], // 新增这行
        exclude: [/node_modules/], 
      },
    ],
  },
  // 其他配置
};

3. 安装lodash的类型定义文件 #

缺少第三方库的类型定义也可能导致TypeScript识别模块失败，执行以下命令安装lodash的类型：

npm install @types/lodash --save-dev

4. 升级html-webpack-plugin到更高版本 #

你当前使用的html-webpack-plugin@4.3.0版本比较老旧，和ts-loader、TypeScript 3.x可能存在兼容性问题。升级到v5+版本大概率能解决这类依赖模块的识别问题：

npm install html-webpack-plugin@latest --save-dev

按上面的步骤逐一排查，应该就能解决这个报错了。

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