Created
June 10, 2017 20:58
-
-
Save christopher4lis/ce3d09c10732dca5c9e9d88862d122d8 to your computer and use it in GitHub Desktop.
This snippet allows webpack-dev-server to hot reload stylesheets extracted with the ExtractTextWebpackPlugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
if (module.hot) { | |
const hotEmitter = require("webpack/hot/emitter"); | |
const DEAD_CSS_TIMEOUT = 2000; | |
hotEmitter.on("webpackHotUpdate", function(currentHash) { | |
document.querySelectorAll("link[href][rel=stylesheet]").forEach((link) => { | |
const nextStyleHref = link.href.replace(/(\?\d+)?$/, `?${Date.now()}`); | |
const newLink = link.cloneNode(); | |
newLink.href = nextStyleHref; | |
link.parentNode.appendChild(newLink); | |
setTimeout(() => { | |
link.parentNode.removeChild(link); | |
}, DEAD_CSS_TIMEOUT); | |
}); | |
}) | |
} |
In https://github.com/sheerun/extracted-loader I've employed an extra technique of removing old stylesheets with onload
callback. It is more responsive and causes less issues. Also you need to remember to not reload 3rd party stylesheets.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This doesn't tell me anything about how to actually use it.