配置TypeScript支持HTML模块：Webpack打包HTML文件失败问题

你遇到的TS2307: Cannot find module './file.html'错误主要有两个核心原因：一是TypeScript没有加载到你的自定义HTML模块类型定义，二是你对file-loader的作用可能存在误解（如果你的目标是导入HTML内容为字符串的话）。下面分步帮你解决：

1. 让TypeScript识别HTML模块的类型定义 #

你的types/index.d.ts文件没有被TypeScript的配置文件纳入解析范围，导致TS不知道如何处理.html后缀的模块。修改src/tsconfig.json的include字段，把根目录下的types目录添加进去：

{
  "compilerOptions": {
    "outDir": "../dist/",
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "allowJs": false,
    "moduleResolution": "node",
    "lib": ["es6", "dom"],
    "typeRoots": ["../node_modules/@types", "../types"],
    // 新增这个配置，确保默认导入语法能正常工作
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "main/**/*",
    "res/html/**/*",
    "../types/**/*" // 加入这一行，让TS识别你的自定义类型定义
  ],
  "exclude": []
}

同时确认你的types/index.d.ts内容是正确的，它告诉TS所有.html模块默认导出一个字符串：

declare module '*.html' {
  const value: string;
  export default value;
}

2. 调整Webpack Loader匹配你的实际需求 #

这里需要明确你的真实需求，对应不同的配置方案：

• 如果想把HTML文件打包到dist/examples目录，同时在TS中导入该文件的输出路径（字符串）：当前的file-loader配置是正确的，它会把HTML文件复制到指定目录，并返回文件的相对路径作为导入值。
• 如果想直接导入HTML文件的内容作为字符串（不输出单独的HTML文件）：需要替换file-loader为raw-loader：
  1. 先安装raw-loader：

     npm install raw-loader --save-dev
     

  2. 修改Webpack配置中的HTML规则：

     {
       test: /\.html$/,
       use: 'raw-loader',
       include: path.resolve(__dirname, 'src', 'res', 'html'),
       exclude: /node_modules/
     }
     

• 如果既想导入HTML内容字符串，又想把HTML文件打包到dist/examples：可以搭配raw-loader和copy-webpack-plugin实现：
  1. 安装copy-webpack-plugin：

     npm install copy-webpack-plugin --save-dev
     

  2. 在Webpack配置中添加插件：

     const CopyPlugin = require('copy-webpack-plugin');
     
     module.exports = {
       // ...其他原有配置
       plugins: [
         new CopyPlugin({
           patterns: [
             {
               from: path.resolve(__dirname, 'src', 'res', 'html'),
               to: path.resolve(__dirname, 'dist', 'examples')
             }
           ]
         })
       ]
     };
     

  3. 保留raw-loader处理HTML导入，这样就能同时获取内容字符串和完成文件打包。

3. 验证配置 #

先清理之前的构建产物：

rm -rf dist

然后重新运行Webpack构建，或者执行tsc -p src/tsconfig.json检查TS是否还报错。如果配置正确，你的src/res/html/index.ts就能正常导入.html文件了。

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