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

Question

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

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

这使得代码编译两次。

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

同样，我运行webpack的唯一原因是让我的index.html文件更新为捆绑的新散列。如果我能得到webpack-dev-server以将更新的index.html输出到磁盘，那么我可以放弃webpack命令。

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

Answer 1

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

Answer 2

我认为这正是你所需要的：https://github.com/jantimon/html-webpack-harddisk-plugin

webpack-dev-server保存在内存中更新的HTML。有了这个插件，它也会将它写入文件系统。