使用 webpack 从打字稿导入 html

Question

我正在尝试使用 webpack 将 html 导入 typescript 中的变量。

这是我的设置：

package.json:

{
  "devDependencies": {
    "awesome-typescript-loader": "^3.2.3",
    "html-loader": "^0.5.1",
    "ts-loader": "^2.3.7",
    "typescript": "^2.5.3",
    "webpack": "^3.6.0"
  }
}

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  context: path.join(__dirname),
  entry: './main',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.js'
  },
  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".js"],
    modules: [
      "node_modules",
      path.join(__dirname, 'app'),
    ],
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.html$/,
        loader: 'html-loader',
      },
      // Faster alternative to ts-loader
      { 
        test: /\.tsx?$/, 
        loader: 'awesome-typescript-loader',
        options: {
          configFileName: 'tsconfig.json',
        },
        exclude: /(node_modules)/,
      },
    ],
  },  
};

main.ts:

import template from './template.html';
console.log(template);

template.html:

<p>Hello World !</p>

当我尝试使用 webpack 进行编译时：

$ ./node_modules/.bin/webpack 

[at-loader] Using typescript@2.5.3 from typescript and "tsconfig.json" from /tmp/test/tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 1 errors
Hash: d06d08edc313f90c0533
Version: webpack 3.6.0
Time: 2194ms
 Asset     Size  Chunks             Chunk Names
app.js  2.72 kB       0  [emitted]  main
   [0] ./main.ts 136 bytes {0} [built]
   [1] ./template.html 40 bytes {0} [built]

ERROR in [at-loader] ./main.ts:1:22 
    TS2307: Cannot find module './template.html'.

我已经研究了半天所以你可以确定 template.html 是它应该在的地方。

我从 webpack config 中了解到 html-loader 应该首先处理文件，因此它应该将 html 文件的内容加载到变量中。至少，这曾经与 es6 一起工作...

谁能告诉我如何使用 webpack / typescript 将 html 加载到变量中？或者至少我的方法有什么问题。

Answer 1

一个简单的解决方法是在加载非 TypeScript 资产时坚持使用 CommonJS "require"：

const template = require('./template.html');

如果您希望继续使用 import，可以将 TypeScript 编译器配置为将文件作为字符串加载。下面的方法在 TypeScript 2.4.2 下对我有用。

将此块添加到项目的类型声明文件中（我的名称为 typings.d.ts）：

// typings.d.ts
declare module '*.html' {
  const content: string;
  export default content;
}

您现在应该可以像这样导入 html 个文件：

// main.ts
import template from './template.html';
console.log(template); // <p>Hello world !</p>

完全披露：我的项目使用了与您不同的加载器（见下文）。

// webpack.config.js
config.module = {
  rules: [
    {
      test: /\.ts$/,
      loader: '@ngtools/webpack'
    },
    {
      test: /\.html$/,
      use: 'raw-loader'
    }
  ]
}

有一个 Github 线程 here 讨论了其他解决方案。

使用 webpack 从打字稿导入 html

Import html from typescript with webpack

typescript

webpack

webpack-html-loader