Possible explanation for non-working HMR

[plhosk]

I couldn't get it to work even after following your examples. However, I discovered that if I change the following:

  plugins: [
    new ExtractTextPlugin({
      filename: 'bundle.[name].[contenthash].css',
    }),

to this:

    new ExtractTextPlugin({
      // filename: 'bundle.[name].[contenthash].css',
      filename: 'output.css',
    }),

it started to work. It seems that the CSS bundle filename must be static for CSS HMR to work properly. Perhaps this will help someone in the future :)

[shepherdwind]

Every time you modify css file, This loader plugin will auto reload css file.

But, if you css file name changed when every time css file content change, then this plugin can not know which css file should be replaced.

So, I think maybe you can use different configurations in different environments. That will be more easy to fix this problem.

[shepherdwind]

Thanks for you remind. I will add this rule to readme.md, so that other people can avoid this problem.

[navarrorc]

I have the following working for me, still generates a static name without the contenthash. So in my opinion using [name].css is safe, thoughts?

plugins: [
  new ExtractTextPlugin({
    filename: "./css/[name].css"
  })
]

[plhosk]

@navarrorc I believe you are correct. Only the [contenthash] option should not be used because it results in a different filename after every change.

The reason for [contenthash] is to ensure the client always receives the latest bundle files without caching. For this reason the [contenthash] option should still be used in the production config. Unless I am mistaken, there should be no side effects to leaving it out in the dev config as long as HMR is in use (along with webpack-dev-middleware or webpack-dev-server).