问题标签 [webpack-html-loader]

出于某种我目前不明白的原因，webpack 不会将我的 HTML 文件捆绑到它生成的包中。它捆绑了其他所有内容，但遗憾的是没有捆绑我的 HTML 文件。

我正在使用 Angular 2，并且包含对以下内容的依赖：

webpack.config：

webpack.common：

还有 webpack.prod：

我正在通过以下方式在我的组件中提取我的 HTML：

据我从文档中了解到的，我认为这应该足够了，但我仍然缺少一些东西。

请注意，我也尝试过使用 raw-loader，它也无法捆绑 HTML 文件。我想知道导入的格式是否需要更接近 "require("html!./file.html");" 所以我也试过了，没有成功。我没有收到任何错误或任何调试信息，不幸的是，我所拥有的只是缺少 HTML 文件。有任何想法吗？

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

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

我有以下定义文件来支持 HTML 的导入（如模块文档中的示例）

对应的导入语句：

我使用的软件包版本：

和 webpack 配置文件

例如，如果我有一个test.html文件，代码是：

我曾经html-loader要求它，就像：

和变量html打印：

style-> .test->background无法获得正确的网址。如何解决？

这是我的webpack配置代码html-loader：

I am using html-loader to load my html template and file-loader to load my images that are in the template. This run just fine in dev but when I run build:prod and run the output, I get a template parse error.

It appears that all angular2 built-in directives (e.g., *ngFor, *ngIf) are all converted to all lowercase (e.g., *ngfor, *ngif) which cases the error.

I tried create a separate project and this time, not using any built-in directives from angular 2, everything works fine.

Is there another loader I can use? How do i correctly load these templates along with the images used by these templates?

here is my webpack.config

And below is the parse error that I get.

Error: Template parse errors: Can't bind to 'routerlink' since it isn't a known property of 'a'. ("r> Menu ][routerlink]=r.routerLink [routerlinkactive]="['active']">{{r.text}} "): t@0:359 Can't bind to 'routerlinkactive' since it isn't a known property of 'a'. (""item ui red" *ngfor="let r of routes"> ][routerlinkactive]="['active']">{{r.text}} Home Menu ]*ngfor="let r of routes"> Home Menu [ERROR ->] ]*ngif=bolWidthLess1000>

[ERROR ->] ][routerlink]=r.routerLink> ][routerlink]=r.routerLink [routerlinkactive]="['active']">{{r.text}} ][routerlinkactive]="['active']">{{r.text}} "): t@0:674 Can't bind to 'ngforOf' since it isn't a known property of 'a'. ("/div>

]*ngfor="let r of routes" class="item mainmenu" [routerlink]=r.routerLink> "): t@0:540 Property binding ngforOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("> [ERROR ->] {{r.text}} ]*ngif=!bolWidthLess1000> "): t@0:512 Property binding ngif not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("routerlink]=r.routerLink [routerlinkactive]="['active']">{{r.text}} [ERROR ->]

我的哈巴狗文件有以下配置...

这很好用，现在我想添加一个使用 url-loader 加载的图像。我的结构是这样的

我想在我添加的 pug 文件中包含 png ......

img(src="thing.png")

这没有解决，所以我尝试了类似img(src=require("thing.png")). 这些都不起作用。我尝试像这样添加 html-loader ...

但后来我得到...

这一切都在我的手写笔中正常工作......

我也试过...

并得到Cannot read property 'png' of undefined

另外，如果我用那里的html注释掉那条线，我会看到...

我如何在哈巴狗中需要图像？

有没有办法直接在 HTML 入口点中预生成（单路由）React 应用程序的 HTML 结构？

然后页面将能够在加载任何 JS 之前显示 HTML（基于 React 初始状态）。

我实际上使用的是webpack-html-loader，但欢迎使用任何其他加载器或插件；）

PS：static-site-generator-webpack-plugin有什么帮助吗？

PS：我没有使用 React Router

我正在使用 WebPack 2，我们正在尝试使用 Vue 以编程方式指定图像名称，并将其绑定到 HTML 中。由于图像名称和路径直到运行时才绑定，因此 HTML 和文件加载器不会重写 url。

有没有办法告诉 HTML/文件加载器“在运行时可能需要任何 [这些文件]”，而不仅仅是将它们放在文件复制插件的列表中？

它以书面形式传递给客户端，然后 Vue 在运行时绑定 ${random}，当然图像不在应用程序中。

谢谢

使用 html-loader 时，<img>index.html 中的标签没有触发 url-loader。这是我的 webpack 配置和 html：

网络包配置

索引.html：

错误日志：

我想使用 HTMLWebpackPlugin 来获取我的index.ejs模板文件，插入我的捆绑资产，并输出一个最终index.ejs文件。

这个例子有一个 EJS 变量<%= API_URL %>，但是 webpack 正在解释它。

如何阻止 webpack 替换变量？

开始“模板”：

当你尝试运行 webpack 时：

ERROR in Template execution failed: ReferenceError: API_URL is not defined

期望的结果 index.ejs：（具有捆绑资产和 EJS var）

监控 window.config = { API_URL: "<%= API_URL %>" }

webpack.config.js

我将 webpacks html-loader 与 pug-html-loader 结合使用，它对于具有 src 属性的 img 标签工作正常。

但是，如果我有一个带有 inlinestyle="background-image: url()"属性的 div，则引用的图像不会通过 webpack 包含/加载到输出目录中

确保我想在我的 pug 模板中加载的任何资产都将通过 webpack 处理的正确方法是什么？