使用 webpack 从打字稿导入 html [英] Import html from typescript with webpack

问题描述

我正在尝试使用 webpack 将 html 导入打字稿中的变量.

I am trying to import html into a variable in typescript using webpack.

这是我的设置:

package.json:

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:

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:

template.html:

<p>Hello World !</p>

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

When I try to compile with with 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 是它应该在的地方.

I've been on this for half a day so you can be sure template.html is where it is supposed to be.

我从 webpack 配置中了解到，html-loader 应该首先处理文件，所以它应该将 html 文件的内容加载到变量中.至少，这曾经适用于 es6...

From what I understand from webpack config is that the html-loader is supposed to process the file first, so it should load the content of the html file into the variable. At least, this used to work with es6...

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

Can anyone tel me how to load html into a variable with webpack / typescript? Or at least what is wrong with my approach.

推荐答案

一个简单的解决方法是在加载非 TypeScript 资源时坚持使用 CommonJSrequire":

An easy workaround is to stick with CommonJS "require" when loading non-TypeScript assets:

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

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

If you'd prefer to keep using import, it's possible to configure the TypeScript compiler to load the file as a string. The method below worked for me under TypeScript 2.4.2.

将此块添加到您项目的类型声明文件中(我的名为typings.d.ts):

Add this block to your project's type declarations file (mine is called typings.d.ts):

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

您现在应该能够像这样导入 html 文件:

You should now be able to import html files like this:

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

完全披露:我的项目使用了与你不同的加载器(见下文).

Full disclosure: my project used different loaders from yours (see below).

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

有一个 Github 线程这里讨论了其他解决方案.

There's a Github thread here where other solutions are discussed.

这篇关于使用 webpack 从打字稿导入 html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！