问题标签 [webpack-html-loader]

我在使用 webpack 加载图像时遇到问题。

当我在 html 页面上使用图像标签时，一切正常：

但我也需要使用内联样式：

在这种情况下，webpack 不会解析图像并将字符串url()保持不变。

网络包配置：

如果有人可以帮助我解决这个问题，我将不胜感激。

根据pug-html-loader的自述文件，加载程序接受一个对象，该对象作为模板data的一部分传递。虽然在pug API 参考options中不可用，但我发现的一个 grunt 插件（grunt-contrib-pug）以相同的方式使用 API。options

我为加载程序指定了以下选项：

根据这个问题，我想通过以下方式访问：

但是，我在编译时总是遇到以下错误：

出于调试目的，我在模板中包含了以下行：

结果是：

我还通过声明一些乱码而不是对象（例如字符串、纯 json、数字..）来确保数据正确传递给 pug，然后 pug 编译器抱怨数据格式无效等.

有人面临同样的问题吗？

我不知道如何使用 webpack 2 导入 html 文件！我正在使用 Angular 1.6.0 和打字稿。

我想导入一个模板并将其用作路由器状态模板：

它给：

什么（奇怪）我不明白的是，如果我导入与上面相同的模板并在组件模板中使用它，它确实给出了相同的错误“找不到模块'./theView.html'”但它有效！

这有效（带有 ts 编译错误）：

webpack.config：

这里发生了什么..？

我正在尝试从我的 webpack 项目中的 pug 模板输出单个 html 文件。我遇到的问题是pug-loader将html渲染到文件中。

我的 webpack.config：

这会为我的项目中的每个 pug 模板正确生成文件，但这些文件不包含 html。相反，每个文件看起来像：

我安装的依赖版本：

如何从传统输入开始webpack将 Web 应用程序转换为输出文件？.html.html

这是一个简单的起点：

索引.html

main.js

webpack.config.js

但是，这会导致在SyntaxError: Unexpected token import处理main.js时。

我正在尝试在静态站点生成器 Hugo 生成的 HTML 文件中散列和优化我的图像。

我可以html-loader使用以下测试配置一次处理一个文件：

并且entry.js很简单：

包含：

这很好用！我得到一个带有散列图像源的 HTML 文件，并且图像本身是散列的。

我真正想做的是能够 glob 一个 HTML 文件目录并获得类似的结果。

我已经尝试过以下方式：

无济于事。

我一直在挖掘和挖掘，我似乎无法找到答案。任何想法表示赞赏！

我有一个由 web pack 捆绑的 angular2 应用程序。我正在使用 html-loader 加载 html 文件。

我想问有没有一种方法可以在 webpack 构建过程开始之前更改我的模板 url？

就像 webpack 构建即将运行时一样，我想在 html url 之前附加一个目录名称。这将允许我针对不同的模板编译 Angular 应用程序。

例子：

在 webpack 构建开始之前，我想在 url 之前附加目录名称，比如

我有一个webpack（v3.5.6）构建，使用html-loader多个 HTML 文件并将其处理到自身中，使用url-loader. 该配置非常适合构建，但在使用Webpack Dev Server(v2.7.1) 时失败，因为Webpack Dev Server似乎没有忽略源 HTML 文件中的注释。它试图从 HTML 的注释部分获取资源，而其中一些资源目前不存在。

这是来自以下的示例错误Webpack Dev Server：

我的（未完成的）webpack配置如下：

webpack.common.js：

webpack.dev.js：

webpack.prod.js：

entry.js：

我对 Webpack 完全陌生，我在一个小项目上使用 scss 和 vue。我尝试将我所有的 .scss 文件编译为 css 并将它们捆绑在一个 bundle.css 中，该 bundle.css 会自动注入到 head 中（我已经设置了 sass 和 css 加载器来归档到 css 的捆绑）。但我也希望我的 vue app.js 包在正文的末尾，也由 htmlWebpackPlugin 注入（已经完成）。使用单个 HtmlWebpackPlugin 将所有内容都放在我的 index.html 中，我会在正文中保留样式或在头部保留 javascript。

我的第一个猜测是，我必须定义 2 个插件实例，例如

但是我如何告诉 webpack，将第一个插件用于 css，另一个用于 js？由于我不test喜欢装载机，我不知道该怎么做

所以这个问题的重点是，有人可以解释我如何实现我的 css-bundle 被注入头部并且我的 js-bundle 被注入身体吗？（赞赏如何在 webpack-config 中执行此操作的代码片段）

尝试使用html-loader插件在 TypeScript 中导入 html：

给出 TypeScript 错误：

TS2307：找不到模块“./button.html”

网络包配置：