7

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.

TetraDev
  • 16,074
  • 6
  • 60
  • 61
  • did you ever find out why it compiles twice. having the same issue... – alphapilgrim Mar 08 '17 at 22:58
  • 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 Mar 15 '17 at 19:09

2 Answers2

5

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.

Sergio Cinos
  • 746
  • 6
  • 13
1

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

MarkoCen
  • 2,189
  • 13
  • 24
  • 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. – TetraDev Jun 16 '16 at 16:18
  • 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. – TetraDev Jun 16 '16 at 16:32
  • 1
    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? – TetraDev Jun 16 '16 at 16:34