16

我正在尝试在 webpack 的帮助下将 HTML 文件作为字符串导入（目前使用 webpack，因为 TypeScript 2.0 不支持非 ES6 目标上的异步/等待）。

我遇到的问题是，即使来自 github 的 html-loader 版本支持配置标志“exportAsEs6Default”，我也无法正确设置它。有没有办法全局设置加载器选项？因为如果我将 html-loader 添加到配置文件中的加载程序部分，加载程序会被调用两次，导致内容被嵌套。

我有以下定义文件来支持 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"
            }
        ]
    }
};
4

1 回答 1

21

所以经过一番修修补补，我找到了一种方法来完成这项工作。由于我不想在每个导入语句中添加“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"
            }
        ]
    }
};

使用的包没有变化。

于 2016-10-29T01:51:02.197 回答