Posted in Uncategorized

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

   February 23, 2021  2 Comments on HMR triggers full page reload since version 3.x with html-webpack-plugin 2.x

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()
  ]

Author: Fantashit

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

  1. 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

  2. @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)

Comments are closed.