如何使用Webpack-dev-server和HTML-webpack-plugin将.html文件输出到磁盘

Question

我使用Webpack和html-webpack-plugin来更新我的index.html文件，生成的脚本捆绑包，如bundle.[hash].js。

然后我必须运行webpack-dev-server，这样我就可以将该捆绑包加载到内存中，并利用Hot Module Replacement。

这会使代码编译两次。

然而，我希望webpack-dev-server也能够更新index.html文件，使用新的bundle.[hash].js，因为现在我必须运行webpack，然后再运行webpack-dev-sever。这似乎很奇怪，要编译两次。

再次说明，我运行webpack的唯一原因是要更新index.html文件，使用捆绑包的新散列值。如果我可以让webpack-dev-server输出到磁盘上更新的index.html，那么我完全可以放弃webpack命令。

这是否可能？如果是这样，webpack配置应该如何更改？我的Webpack配置非常长，因此我认为在此发布它不会有帮助。

- TetraDev

---

你最终找出来为什么它要编译两次了吗？我也遇到了同样的问题... - alphapilgrim

是的，它编译两次是因为它应该这样做。webpack会编译，webpack-dev-server也会编译。最终我没有使用webpack来更新index.html文件，只在开发过程中使用webpack-dev-server，在生产构建时只使用webpack。你需要在其中一个中放置一些排除项以防止其编译。 - TetraDev

Answer 1

我认为这正是您需要的：https://github.com/jantimon/html-webpack-harddisk-plugin webpack-dev-server会将更新后的HTML保存在内存中。使用此插件，它还会将其写入文件系统。

- Sergio Cinos

Answer 2

webpack-dev-server 会将编译后的打包文件存储在内存中，不会将打包文件写入输出目录，因此我认为在使用 webpack-dev-server 时不需要在打包文件名中添加 [hash]。

您可以有三个 webpack 配置文件，例如 webpack.common.js、webpack.dev.js 和 webpack.prod.js。 webpack.common.js 包含通用配置，可以通过使用 webpack-merge 将其与其他配置合并。 webpack.dev.js 用于 webpack-dev-server，输出文件名应为 bundle.js。 webpack.prod.js 用于生产环境，输出文件名应为 bundle.[hash].js。

然后，您只需简单地运行 webpack-dev-server webpack.dev.js。

- MarkoCen

---

我正在使用三个不同的配置，就像 Angular2-webpack-starter 一样。但是为了让我的 .NET 服务器页面 _Layout.cshtml（单页应用程序的主视图）加载 webpack bundle，_Layout.cshtml 必须通过 webpack 写入 bundle 的名称。因此，webpack-dev-server 无法使用新的 bundle hash 更新视图，我必须使用 "webpack" 来写入 bundle 名称，然后使用 "webpack-dev-server" 来提供 bundle。 - TetraDev

其实我刚意识到webpack-dev-server无法加载旧的哈希值，因为它没有缓存，而是在内存中加载，并在开发服务器停止时清除。所以你说的没错，我可以从dev bundle中删除哈希值。 - TetraDev

新想法：在构建过程中，是否有办法让webpack-dev-server将资源输出到wwwroot目录？或者只能让webpack将资源输出到磁盘上？ - TetraDev