使用 webpack 从 html 文件加载淘汰赛模板

Posted 2023-03-13

【中文标题】使用 webpack 从 html 文件加载淘汰赛模板

【英文标题】：Load knockout template from html file with webpack

【发布时间】：2017-08-15 08:28:44

【问题描述】：

我正在尝试从外部文件加载我的淘汰赛模板。 我的设置如下：

npm 网页包 打字稿

现在，我尝试了几个不同的选项，但都没有奏效：

text-loader / raw-loader / html-loader

template: require("text-loader!./my-component.html")
// or
template: require("raw-loader!./my-component.html")
// or
template: require("html-loader!./my-component.html")

不起作用，因为这会返回一个类似于 javascript 代码的文本，其中包含我的模板。

knockout-template-loader

template: require("knockout-template-loader!html-loader!./my-component.html")

不起作用，因为它只返回一个空对象。

script-template-loader

template: require("script-template-loader?addToDom=true!./hello.html")

这有两个问题：

模板不喜欢 HTMLScriptElement 对象 生成的脚本在字符串[object Object]旁边没有实际内容

require 选项

template: require: "text-loader!./my-component.html"

没有工作，因为我在运行时遇到错误：

无法读取__webpack_require__处未定义的属性“调用”

我错过了什么？

【参考方案1】：

html-loader 插件确实在工作。为什么它一开始不起作用是因为我在 webpack.config.js 中注册了 knockout-template-loader 作为 html 文件的默认加载器。 即使在 require 中指定了特定的加载器，它看起来也正在使用它。 删除该规则后，它现在可以工作了