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

6
votes

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.

2
webpackwebpack-dev-serverwebpack-hmrhtml-webpack-pluginwebpack-hot-middleware
did you ever find out why it compiles twice. having the same issue... - alphapilgrim
Yea, it compiles twice because it is supposed to.webpack will compile, and webpack-dev-server will compile. I ended up not using webpack to update the index.html file and only use webpack-dev-server during development, and only webpack during production build. You would need to put some excludes in either one to prevent it from compling. - TetraDev

2 Answers

4
votes

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.

1
votes

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