HMR triggers full page reload since version 3.x with html-webpack-plugin 2.x

[hendrikeng]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Since i upgraded webpack to version 3.x HMR doesn't work anymore.
It always triggers a full page reload (inject js or scss).
It might be related to html-webpack-plugin jantimon/html-webpack-plugin#760

The same config does work with webpack@2.x, webpack-dev-server@2.x and html-webpack-plugin@2.x

If the current behavior is a bug, please provide the steps to reproduce.

minimal repository, HMR does a full reload as soon as webpack has been updated
https://github.com/hendrikeng/webpackHMRtest

devServer: {
    hot: true,
    inline: true,
    overlay: false,
    quiet: false,
    contentBase: path.resolve(__dirname, "./../src/public/"),
    watchContentBase: true,
    historyApiFallback: false,
    noInfo: true
  },
  performance: {
    hints: false
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/ejs/_layout.ejs",
      filename: "./src/public/index.html",
      inject: true,
      alwaysWriteToDisk: true
    }),
    new HtmlWebpackHarddiskPlugin()
  ]

[TheLarkInn]

I was able to reproduce this using the vue-cli;

This is the fastest way to test it out::
yarn global add vue-cli && yarn init pwa test-app && cd test-app && yarn && yarn add webpack@latest && yarn dev

[sokra]

It's a combination of

HtmlWebpackPlugin({ alwaysWriteToDisk: true })

and

webpack-dev-server devServer.watchContentBase: true

---

HtmlWebpackPlugin writes the index.html into the contentBase. webpack-dev-server triggers a full reload when the contentBase was updated.

I recommend to not use alwaysWriteToDisk.

[TheLarkInn]

Ahhhhh I think this is really because html-webpack-plugin is forcing the emit event every time.

This code is suspect.

// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

When I comment out the following line:
hotMiddleware.publish({ action: 'reload' }) it works like a charm. My theory is something new in later builds of html-webpack-plugin or its interaction with webpack and v3 is triggering the emit every time. What, I'm not sure.

cc @jantimon

[jantimon]

@TheLarkInn The html-webpack-plugin has some code which should prevent that:

https://github.com/jantimon/html-webpack-plugin/blob/672f34bc98ff4130dba94551866d0e57086a7915/index.js#L77-L90

However the best way would be if webpack would allow me to create a child compiler which only recompiles if one of the child compilers source files changes.

Right now I have to start the child compiler for the html generation in every webpack make phase and try the best to run as little code as possible with a lot of custom caching logic which really dependents on webpack internals:
https://github.com/jantimon/html-webpack-plugin/blob/672f34bc98ff4130dba94551866d0e57086a7915/index.js#L45-L48

I guess providing a better childCompiler could increase the performance of many many many webpack compilations out there.

The idea of HtmlWebpackHarddiskPlugin is to help complex setups which produce a template which is than used by express server plugins which work only with files from disk or sth similar use cases. It should be used only for that - (therefore it is not part of the html-webpack-plugin)