How to output .html to disk using Webpack-dev-server and HTML-webpack-plugin

Question

I use webpack and html-webpack-plugin to update my index.html file with a generated script package, for example bundle.[hash].js .

Then I need to run webpack-dev-server so that I can load this package into memory and take advantage of the Hot Module replacement feature.

This leads to compilation of the code twice.

However, I would like webpack-dev-server also be able to update index.html with a new bundle.[hash].js , because now I need to run webpack and then webpack-dev-sever . It seems strange to compile twice.

Again, the only reason I run webpack is to get the index.html file with a new package hash. If I could get webpack-dev-server to output the updated index.html to disk, I could refuse the webpack command webpack .

Is it possible? If so, how will the webpack configuration change? My webpack configuration is very long, so I didn’t think it would help post it here.

Answer 1

webpack-dev-server save the compiled package in memory and will not write the package for directory output, so I think you do not need to add [hash] in the package name when using webpack-dev-server ,

you can have three web package configuration files, for example webpack.common.js , webpack.dev.js and webpack.prod.js ,

webpack.common.js contains common configurations that can be combined with other configurations using webpack-merge

webpack.dev.js is used for webpack-dev-server and the output file name should be bundle.js

webpack.prod.js is used for production, and the output file name should be bundle.[hash].js

then you can just run webpack-dev-server webpack.dev.js

Answer 2

I think this is exactly what you need: https://github.com/jantimon/html-webpack-harddisk-plugin

webpack-dev-server stores updated HTML in memory. With this plugin, he will also write it to the file system.