配置Typescript以使用html模块

Question

我正在尝试使用typescript和webpack设置项目，但是我无法在构建过程中捆绑html文件。

我希望index.ts将所有.html个文件作为字符串导入（它可以导入.ts文件就好了），然后这将导致webpack使用{{1}捆绑它们并将它们放在file-loader中（因此，如果我有更多dist/examples个文件，我会在这里导入它们，并且它们也会在.html中结束。

我已尝试导入的相对名称和绝对名称，但在使用webpack和我尝试使用dist/examples手动执行时，我收到错误TS2307: Cannot find module './file.html'。

我是打字稿的新手，这是我第一次使用tsc -p src/tsconfig.json文件，但据我所知，.d.ts文件应该告诉打字稿解析所有index.d.ts文件为字符串。

webpack.config.js

.html

的src / tsconfig.json

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: path.resolve(__dirname, 'src', 'main', 'index.ts'),
    html: path.resolve(__dirname, 'src', 'res', 'html', 'index.ts')
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
        options: {
          configFile: 'src/tsconfig.json',
        }
      },
      {
        test: /\.html$/,
        loader: 'file-loader',
        include: path.resolve(__dirname, 'src', 'res', 'html'),
        exclude: /node_modules/,
        options: {
          name: '[name].[ext]',
          outputPath: 'examples',
        }
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.html', '.js' ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
};

类型/ index.d.ts

{
  "compilerOptions": {
    "outDir": "../dist/",
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "allowJs": false,
    "moduleResolution": "node",
    "lib": ["es6", "dom"],
    "typeRoots": [ "../node_modules/@types", "../types"],
  },
  "include": [
        "main/**/*",
        "res/html/**/*"
    ],
    "exclude": []
}

SRC / RES / HTML / index.ts

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

SRC / RES / HTML / file.html

import test from './test'
import file from './file.html'

Answer 1

您的目录＆＃34;类型/＆＃34;包括具有以下内容的文件：

declare module "html!*" {
    const value: string
    export default value
}

必须可以从包含的路径（文件"include"中的选项tsconfig.json）访问此目录。

请注意，"typeRoots" option不应用于包含您自己的类型。在使用npm的@types系统时，可以选择使TypeScript编译器机制可配置。