问题标签 [html-webpack-plugin]

I need to inject a Stylus bundle into the html file in webpack config file.

I already inject the js bundle using HtmlWebpackPlugin and I thought that it was possible to inject a compiled stylus bundle using this plugin too.

Below is my current webpack.config.js file:

The only way I got the styles work was to add require('./index.styl); in my javascript file, but this is not what I need.

HtmlWebpackPluginConfigForJS works fine and successfuly injects the index_bundle.js file in my index.html. But it doesn't work with the styles.

Could you please help me to improve my webpack config to make it inject my stylus bundle correctly?

当我在运行时更改我的app.js和main.css时webpack-dev-server，捆绑包会更新。但是当我更改index.html内容时不会刷新；如果我在 HTML 中添加一行，webpack-dev-server则不会刷新页面上的任何内容。这是我的webpack.config.js和package.json文件。我希望你能帮助我。

webpack.config.js：

包.json：

我的目录结构：

目录中的每个文件dist都是由 webpack 生成的。

我正在使用 webpack 构建我的反应应用程序。我只是想知道是否有生成具有脚本选项卡的 html 文件名中带有版本号的方法，例如 .

我试图探索 HtmlWebpackPlugin 但一无所获。谁能给我一个方向，是否有可用的插件来执行此操作，或者我必须编写自己的脚本。

谢谢

我的 webpack配置是这样的：

这是我的节点 server.js：

但是当我运行这个时，我总是得到错误Cannot GET /build/build0.chunk.js

我在开发环境中使用webpack一切正常，但是在生产环境中我总是得到这个错误，我只是得到0.chunk.js等等1.chunk.js，但是为什么这个错误显示：Cannot GET /build/build0.chunk.js，我的有什么问题htmlwebpackplugin吗？

我是第一次使用 webpack，对 webpack 不是很了解。我正在使用 angular - ES6 - bable，我正在尝试使用 webpack-angular-translate。

我收到以下错误：

./~/html-webpack-plugin/lib/loader.js!./src/index.html 中的错误模块解析失败：/Users/samirshah/Desktop/nuskin_translate/node_modules/html-webpack-plugin/lib/loader。 js!/Users/samirshah/Desktop/nuskin_translate/node_modules/webpack-angular-translate/dist/html/html-loader.js!/Users/samirshah/Desktop/nuskin_translate/src/index.html 意外令牌 (1:0)

您可能需要适当的加载程序来处理此文件类型。

我正在尝试在模块中设置预加载器。当我尝试设置 html 的预加载器时，我遇到了上述错误。

WebPackAngularTranslate.jsLoader() 工作正常。我不确定为什么 WebPackAngularTranslate.htmlLoader() 会抛出错误。

任何人都面临过类似的问题。请在这里帮助我。

提前致谢。

这是我的配置文件：

我刚开始将 Webpack 与 Angular 1.x 应用程序一起使用，我有一个可行的解决方案，但不是需要我的图像（这会强制将它们复制到构建目录）我希望自动解析 html 并需要所有 IMG标签。

我似乎找到了一个模块，虽然它似乎不再维护：https ://github.com/webpack/html-loader

我想知道我的选择是什么？

选项是使用 Webpack 复制插件将项目复制到构建目录中，但这意味着我可能会复制不使用的东西。

我刚开始使用 Webpack，但到目前为止我所看到的都很棒，尽管它确实需要不同类型的思维来吞咽。

我使用webpackandhtml-webpack-plugin使用生成的脚本包更新我的 index.html 文件，例如bundle.[hash].js.

然后我必须运行webpack-dev-server，以便我可以将该包加载到内存中并利用热模块更换。

这使得代码编译两次。

但是，我想要的是webpack-dev-server也能够用新的 更新 index.html 文件bundle.[hash].js，因为现在我必须先webpack运行webpack-dev-sever. 编译两次似乎很奇怪。

同样，我运行的唯一原因webpack是使用捆绑包的新哈希更新我的 index.html 文件。如果我可以webpack-dev-server将更新的 index.html 输出到磁盘，那么我可以webpack完全放弃该命令。

这可能吗？如果是这样，webpack 配置会发生什么变化？我的 webpack 配置很长，所以我不认为在这里发布它会有所帮助。

我正在使用带有 htmlWebpackPlugin 和自定义模板的 webpack 来生成 html 文档。在页面底部，我想包含一个 JSON-LD 片段，其中包含有关我们公司的结构化数据。通常，这看起来像这样：

但是，由于我使用的是 webpack，因此需要动态生成该资产 URL。我想过做这样的事情：

不幸的是，webpack 的 JSON 加载器没有提供解析资产 URL 的方法，并且有充分的理由——这样的做法是不好的做法，因为它会导致人们创建无效的 JSON 文件：

关于如何进行的任何建议？这是我发现的第一个 webpack 用例，我没有立即看到一个漂亮的解决方案。

我很有趣 webpack 为我的应用程序生成包。生成捆绑包后，我需要执行以下任务。

1. 打开捆绑文件并重命名某个路径。由于我们设置放置网站的方式，我不得不更改我们创建的包中的路径。目前我正在手动更改路径。所以基本上我正在寻找运行一个任务，它将查找 XXXX 文本并将其替换为包中的 YYYY。
2. 重命名键/文本后，我想丑化内容以缩小文件。

我有什么选择。我是 webpack 的新手，我正在寻找可能的解决方案。

我正在将 webpack 用于 react(es6) 项目。

我的问题

我已经用 ES6 构建了 react 应用程序，所以在任何地方我都使用import关键字进行依赖。现在对于服务器端渲染，我使用的是 NodeJS，所以它还不支持导入。为此，我必须使用require而不是import。

现在我已经使用 webpack 来捆绑我的应用程序，但它总是生成最终的捆绑文件（single.bundle.js），这就是为什么我无法为服务器端渲染导入转译代码块的原因。

解决方案

如果可以转换每个文件（src 到 dist），那么我可以将此 es5 文件导入 nodejs 服务器代码。

问题

这是否可以通过 webpack 使用相同的输出而不是捆绑文件来转换整个文件夹？

否则我必须使用 grunt 或 gulp。:(