问题标签 [webpack-html-loader]

如何配置 html-loader 以用正确的路径替换我的 ng-src 属性？我有一个遗留应用程序，它有类似的东西 -

我使用 webpack 来构建一个 Angular 项目。我的 webpack 配置是从另一个项目中复制而来的，它可以成功运行。

但在我的项目中，它不会将 .html 模板包含到生成的 javascript 包中。

这是感兴趣的 webpack 配置部分：

我的项目的脚手架如下：

在index.html我说：

并且标题模板不包含在生成的app.<hash>.js捆绑包中。如何调试这个？

我正在尝试做的是结合html-loader复制从 html 模板引用的资产，例如<img src="some/path/here.jpg" />并将file-loader这些 html 模板复制到 bundle 文件夹中。我不想将这些 html 文件直接嵌入到 javascript 包中。

我认为这会起作用，但它不是：

我最终在我复制的 html 模板中有这个：

module.exports = "<img src=\"" + require("../img/image.jpg") + "\" />";

任何帮助将非常感激。

编辑

澄清。

我的 html 模板具有以下内容：

运行 webpack 后，image.jpg不会复制到assets/文件夹。html 模板被复制到templates/文件夹中，但其内容为：

而我希望它是：

当然，图像应该以计算的名称（带有哈希）复制到那里。

我正在开发一个角度应用程序，该应用程序需要html将文件提取为纯 HTML 文件，同时应检查是否<img src="...">需要这些图像（作为资产）。另外，图片是基于根路径（so /images/something.png）的，需要相对于 webpackcontext设置（基本路径）进行解析。

我怎样才能做到这一点？无法让 html-loader 与文件加载器很好地配合使用。因为前者输出一个 JS 文件（带有require语句），而后者需要一个纯 HTML 文件。

我正在使用 Webpack 编写一个 Angular2 应用程序，并为我的模板使用 html 加载器。

我的一个模板中有这一行：

<img attr.src="apps/{{ appName }}/icon.png" />

html-loader 可以理解地尝试在编译时加载此图标，但失败了。正如你所理解的，我的意图是让图标的路径是动态的（这是 an 的一部分ngFor），因此我希望 webpack 在编译时忽略它。

如何指示 html-loader 忽略这个特定的 img 源？

编辑：我发现可以在 html 加载器中完全禁用属性解析（即，没有图像源或 html 中包含的任何其他内容将在编译时加载），但我希望能够有选择地仅排除特定图像路径。

我正在尝试替换 index.html 中的变量，如下所示：

<meta name='author' content=$variable>

在我使用的配置文件中：

在loaders数组中，然后在plugins：

但是这个设置会导致：

ERROR in ./~/html-webpack-plugin/lib/loader.js!./src/index.html Module parse failed (...) Unexpected token (1:0) You may need an appropriate loader to handle this file type.

你有什么想法这可能是由什么引起的，或者我该如何调试？

我正在考虑将我们的一个项目的大型本地构建脚本迁移到 webpack。

它的一个功能是遍历/views目录并将 html 文件的内容复制到主index.html文件中。这使我们可以轻松地使用 KnockoutJS 的模板功能，而无需自己将所有内容都放在一个文件中。像这样的东西：

理想情况下，我希望能够做类似的事情require('./views')并将每个.html文件嵌入为<script type="text/html" id="views/foo">...</script>，将文本注入脚本标记并将 设置id为文件路径。我们有近 100 种不同的模板，所以我想避免require()单独使用它们。

我可以配置html-loader或html-webpack-plugin执行此操作吗？我想知道我是否必须编写自己的 webpack 插件，或者是否有办法配置现有插件来做我想做的事。

谢谢！

所以我想用 webpack 做一个非常简单的任务。

我有一些静态 HTML 模板，例如

测试.html

我要做的就是返回模板内的字符串，例如

with 应该返回一个字符串，如：

但相反，它返回以下字符串

我尝试了几个模块，比如 raw-loader 和 html-loader。而且它们的行为方式相同。所以我查看了源代码，只是为了发现它应该以这种方式运行。

那么，如果我只想要原始 HTML，我到底应该怎么做呢？仅删除前置的“module.exports =”字符串是一种不好的做法吗？从捆绑编辑中：删除“modules.export =”部分会导致捆绑不返回任何内容：/

我的配置

在html-loader文档中有这个例子

“清单”从何而来？如何为插值范围提供参数？

我想做类似template-string-loader 的事情：

然后在 file.html

但它不起作用。我尝试将模板字符串加载器与 html-loader 混合，但它不起作用。我只能使用模板字符串加载器，但是 HTML 中的图像不会被 webpack 转换。

有任何想法吗？谢谢

我刚刚开始使用 Jest 测试框架，虽然直接的单元测试工作正常，但我在测试其模块（通过 babel+webpack 的 ES 模块）中需要 HTML 文件的任何组件时遇到大量问题。

这是一个例子：

我正在加载我在 Jest 的package.json配置中设置的组件特定 SCSS 文件以返回一个空对象，但是当 Jest 尝试运行该import template from './errorHandler.tmpl';行时，它会中断说：

我的 Jest 配置package.json如下：

似乎 webpackhtml-loader不能与 Jest 一起正常工作，但我找不到任何解决方案来解决这个问题。

有谁知道我怎样才能让这些html-loader import在我的测试中发挥作用？他们加载了我的 lodash 模板标记，我宁愿有时在我的.js文件中没有这些大量的 HTML 块，所以我可以省略这import template from x部分。

PS：这不是一个 React 项目，只是普通的 webpack、babel、es6。