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 the generated script bundle, such as bundle.[hash].js.

Then I have to run webpack-dev-server so I can load that bundle into memory and take advantage of Hot Module Replacement.

This makes the code compile twice.

However, what I would like is for webpack-dev-server to also be able to update the index.html file with the new bundle.[hash].js, because now I have to run webpack followed by webpack-dev-sever. It seems weird to compile twice.

Again, the only reason I run webpack is to get my index.html file updated with the new hash of the bundle. If I could get webpack-dev-server to output an updated index.html to disk, then I could drop the webpack command altogether.

Is this possible? If so, what would the webpack config change be? My webpack config is very long so I didnt think it would help to post it here.

Answer 1

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

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

Answer 2

webpack-dev-server would store the compiled bundle in memory, and won't write the bundle to ouput directory, so I think you don't need to add [hash] in bundle name when using webpack-dev-server,

you could have three webpack config files, say webpack.common.js, webpack.dev.js and webpack.prod.js.

webpack.common.js contains common configurations which can be merged with other configurations by using webpack-merge

webpack.dev.js is used for webpack-dev-server, and output filename should be bundle.js

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

then you could simply run webpack-dev-server webpack.dev.js