Add section for HMR and external stylesheets

[christopher4lis]

There's currently no default way to reload external stylesheets automatically with HMR. There is a work around however, involving the automatic insertion and removal of link tags within a hotEmitter.on("webpackHotUpdate"... function. Many people have looked for a solution for this, but the only answer is located in an issue thread near the very bottom: webpack-contrib/extract-text-webpack-plugin#30

It would be much more efficient and helpful for developers to see the solution directly on the docs page until a workaround is implemented into Webpack core.

[skipjack]

Hmmm I'd like to keep this guide (and others, see #1273) a bit less advanced. Also, if you're referring to stylesheets extracted with the extract-text-webpack-plugin, we typically recommend using the disable and fallback options to disable the extraction in development. This allows the style-loader to handle updates more smoothly. If you aren't familiar with this approach I can elaborate a bit.

This is an interesting approach though, if you have or know of a blog post or article that documents this I think it would be a better thing to add as an external link either via the related frontmatter or in the Other Code and Frameworks section.

[skipjack]

@christopher4lis closing based on my comment above, but feel free to continue the discussion.

[christopher4lis]

Fair point, I was mainly unaware that webpack-dev-server doesn't hot reload extracted files by default, as a result I went down a bit of a rabbit hole trying to find a decent solution.

I implemented your recommendation on disabling the ExtractTextWebpackPlugin so webpack-dev-server can still manage CSS changes—the only downsides were a little extra configuration and flashes of unstyled content (FOUC) while developing. I understand the the FOUC will only show on dev, but it can get a little annoying each time the page is refreshed due to a backend file change.

Just some thoughts from my end, I think noting somewhere in the documentation that webpack-dev-server doesn't reload extracted stylesheets by default would be a big help for other devs coming across the same issue :)

[skipjack]

I understand the the FOUC will only show on dev, but it can get a little annoying each time the page is refreshed due to a backend file change.

Hmm I use that plugin on a variety of apps and haven't had issues with FOUCs. I wonder if there's something else going on that's causing that or maybe just because you have a lot of styling.

Just some thoughts from my end, I think noting somewhere in the documentation that webpack-dev-server doesn't reload extracted stylesheets by default would be a big help for other devs coming across the same issue :)

That's fair -- if you wanted to re-open and add a warning to the CSS section of the guide that'd be fine:

W> Note that when using the `ExtractTextPlugin` you'll have to `disable` it and provide `fallback`s in development to allow hot-loading with the `style-loader`. See [the documentation](https://webpack.js.org/plugins/extract-text-webpack-plugin/) for details.