Typescript 2.0和Webpack将HTML作为字符串导入

Question

我正在尝试在webpack的帮助下将HTML文件导入为字符串(目前使用webpack,因为TypeScript 2.0不支持非ES6目标上的async/await).

我遇到的问题是,即使github的html-loader版本支持配置标志'exportAsEs6Default',我也无法正确设置它.有没有办法在全球范围内设置加载程序选项？因为如果我将html-loader添加到配置文件中的loaders部分,则会调用加载器两次,从而导致内容嵌套.

---

我有以下定义文件来支持HTML的导入(就像模块文档中的示例一样)

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

相应的进口声明:

import templateString from "html!./Hello.html";

我使用的软件包的版本:

"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"html-loader": "git://github.com/webpack/html-loader.git#4633a1c00c86b78d119b7862c71b17dbf68d49de",
"ts-loader": "^0.9.5",
"typescript": "2.0.3",
"webpack": "^1.13.2"

和webpack配置文件

"use strict";

module.exports = {
    entry: "./WebApp/Hello.ts",
    output: {
        path: "./wwwroot/compiled",
        filename: "app.bundle.js"
    },
    resolve: {
        extensions: ["", ".webpack.js", ".web.js", ".js", ".ts"]
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loader: "babel-loader!ts-loader"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    }
};

Answer 1

因此,经过一些修补,我找到了一种方法来完成这项工作.因为我不想在每个import语句中添加'exportAsEs6Default'查询参数,所以我从html的显式加载器更改为已配置的加载器.

我会留下这个问题以防万一有人知道更好的方法,因为目前我不确定我是否都会满意这种方式(无需加载器即可找到原创的打字稿),但也许它将帮助其他人面临同样的问题.

所以上面例子中的import语句改为

import templateString from "./Hello.html";

与更新的定义文件一起使用

declare module "*.html" {
    const content: string;
    export default content;
}

并且webpack配置文件更改为:

"use strict";

module.exports = {
    entry: "./WebApp/Hello.ts",
    output: {
        path: "./wwwroot/compiled",
        filename: "app.bundle.js"
    },
    resolve: {
        extensions: ["", ".webpack.js", ".web.js", ".js", ".ts", ".html"]
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loader: "babel-loader!ts-loader"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                loader: "html-loader?exportAsEs6Default"
            }
        ]
    }
};

没有更改使用的包.