diff --git a/hotModuleReplacement.js b/hotModuleReplacement.js index 01f6d657..c793d6c6 100644 --- a/hotModuleReplacement.js +++ b/hotModuleReplacement.js @@ -1,9 +1,10 @@ +var currentlyProcessing = {}; module.exports = function(publicPath, outputFilename) { if (document) { var newHref = publicPath.match(/https?:/g) ? new URL(outputFilename, publicPath) : new URL(publicPath + outputFilename, window.location); var links = document.getElementsByTagName('link'); - //update the stylesheet corresponding to `outputFilename` + //update the stylesheet corresponding to `outputFilename` for (var i = 0; i < links.length; i++) { if (links[i].href) { var oldChunk = new URL(links[i].href); @@ -19,15 +20,24 @@ module.exports = function(publicPath, outputFilename) { link.charset = 'utf-8' link.type = 'text/css' link.rel = 'stylesheet' - + + // TODO: Look into using __webpack_hash__ + if (!currentlyProcessing[oldChunk.pathname]) { + currentlyProcessing[oldChunk.pathname] = [oldSheet]; + } else { + currentlyProcessing[oldChunk.pathname].push(link); + } head.insertBefore(link, oldSheet.nextSibling) // remove the old sheet only after the old one loads so it's seamless // we gotta do it this way since link.onload basically doesn't work var img = document.createElement('img') img.onerror = function() { - oldSheet.remove() - console.log('[HMR]', 'Reload css: ', url); + if (currentlyProcessing[oldChunk.pathname]) { + currentlyProcessing[oldChunk.pathname].forEach(old => old.remove()); + currentlyProcessing[oldChunk.pathname] = null; + console.log('[HMR]', 'Reload css: ', url); + } } img.src = url break;