在 webpack 中导入 html 文件时找不到模块错误

Posted 2023-02-22

【中文标题】在 webpack 中导入 html 文件时找不到模块错误

【英文标题】：Cannot find module error on importing html file in webpack

【发布时间】：2018-02-23 18:49:20

【问题描述】：

尝试使用 html-loader 插件在 TypeScript 中导入 html：

import buttonHtml from './button.html';

给出 TypeScript 错误：

TS2307：找不到模块“./button.html”

Webpack 配置：

const path = require('path');

module.exports = 
  entry: 
      'background.js':path.resolve(__dirname, './background.ts'),
      'content.js': path.resolve(__dirname,'./content.ts')
  ,
  devtool: 'inline-source-map',
  module: 
    rules: [
      
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      ,
      
        test: /\.html$/,
        exclude: /node_modules/,
        use: loader: 'html-loader'
    
    ]
  ,
  resolve: 
    extensions: [ ".tsx", ".ts", ".js" ]
  ,
  output: 
    filename: '[name]',
    path: path.resolve(__dirname, 'dist')
  
;

【参考方案1】：

如果你想像这样加载 html，你需要一个带有这个条目的 typings.d.ts 文件：

declare module '*.html' 
  const value: any;
  export default value;

【讨论】：

它从表面上消除了错误。当我使用 webpack 编译时，错误仍然存​​在。