Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
hendrikeng opened this issue Aug 11, 2017 · 4 comments
Closed

Comments

@hendrikeng
Copy link

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
Copy link
Member

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 sokra added this to the webpack 3 milestone Aug 15, 2017
@sokra
Copy link
Member

sokra commented Aug 16, 2017

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
Copy link
Member

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
Copy link
Contributor

jantimon commented Aug 17, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants