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.

Blastocoel

did you ever find out why it compiles twice. having the same issue... – Barbra

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. – Blastocoel

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.

Bubb

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

Newish

I am using 3 different configs just like that, from Angular2-webpack-starter. But in order to get my .NET server page _Layout.cshtml (which is the main view for the single page app) to load the webpack bundle, _Layout.cshtml has to be written to by webpack with the name of the bundle. Therefore, webpack-dev-server cannot update the View with the new bundle hash, and I have to use "webpack" to write the bundle name, and then "webpack-dev-server" to serve the bundle. – Blastocoel

Actually I just realized that it cannot load old hash from webpack-dev-server because there is no cache, it's loaded in memory and cleared any time the dev server stops. So you're correct that I can remove hash from dev bundle. – Blastocoel

New Idea: Is there a way to get webpack-dev-server to output assets into wwwroot during build? Or can only webpack output assets to disk? – Blastocoel