diff --git a/README.md b/README.md index 7cb9de5e..ead2e47d 100644 --- a/README.md +++ b/README.md @@ -82,7 +82,6 @@ module.exports = { options: { hot: true, // if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config reloadAll: true, // when desperation kicks in - this is a brute force HMR flag - } }, "css-loader" @@ -298,29 +297,6 @@ new ExtractCssChunk({ >Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'development'` and `[name].[contenthash].css` during production, so you can likely forget about having to pass anything. -### HMR Troubleshooting -**Blank array in HMR script?** - -If you have issues with HMR, but enabled the loader, plugin, and already tried `hot: true, reloadAll:true`, then your webpack config might be more abstract than my simple lookup functions. In this case, Ive exported out the actual hot loader, you can add this manually and as long as you've got the plugin and loader -- it'll work - -```js - rules: [ - { - test: /\.css$/, - use: [ - ExtractCssChunks.hotLoader, // for those who want to manually force hotLoading - ExtractCssChunks.loader, - { - loader: 'css-loader', - options: { - modules: true, - localIdentName: '[name]__[local]--[hash:base64:5]', - }, - }, - ], - }, - ] -``` ### HMR Pitfall diff --git a/src/hmr/hotModuleReplacement.js b/src/hmr/hotModuleReplacement.js index de2e8666..62f08f79 100644 --- a/src/hmr/hotModuleReplacement.js +++ b/src/hmr/hotModuleReplacement.js @@ -154,6 +154,13 @@ module.exports = function(moduleId, options) { function update() { var src = getScriptSrc(options.filename); var reloaded = reloadStyle(src); + + if (options.locals) { + console.log('[HMR] Detected local css modules. Reload all css'); + reloadAll(); + return; + } + if (reloaded && !options.reloadAll) { console.log('[HMR] css reload %s', src.join(' ')); } else { @@ -162,5 +169,5 @@ module.exports = function(moduleId, options) { } } - return debounce(update, 10); + return debounce(update, 50); }; diff --git a/src/index.js b/src/index.js index c5a13fd2..145b6403 100644 --- a/src/index.js +++ b/src/index.js @@ -484,8 +484,7 @@ class ExtractCssChunksPlugin { if (this.options.orderWarning) { compilation.warnings.push( new Error( - `chunk ${chunk.name || - chunk.id} [extract-css-chunks-webpack-plugin]\n` + + `chunk ${chunk.name || chunk.id} [${pluginName}]\n` + 'Conflicting order between:\n' + ` * ${fallbackModule.readableIdentifier( requestShortener diff --git a/src/loader.js b/src/loader.js index 943a8138..3573a461 100644 --- a/src/loader.js +++ b/src/loader.js @@ -22,7 +22,10 @@ function hotLoader(content, context) { var cssReload = require(${loaderUtils.stringifyRequest( context.context, path.join(__dirname, 'hmr/hotModuleReplacement.js') - )})(module.id, ${JSON.stringify(context.query)}); + )})(module.id, ${JSON.stringify({ + ...context.query, + locals: !!context.locals, + })}); module.hot.dispose(cssReload); ${accept} } diff --git a/test/__snapshots__/TestCases.test.js.snap b/test/__snapshots__/TestCases.test.js.snap index f0f20449..b6f3c48b 100644 --- a/test/__snapshots__/TestCases.test.js.snap +++ b/test/__snapshots__/TestCases.test.js.snap @@ -157,6 +157,13 @@ module.exports = function(moduleId, options) { function update() { var src = getScriptSrc(options.filename); var reloaded = reloadStyle(src); + + if (options.locals) { + console.log('[HMR] Detected local css modules. Reload all css'); + reloadAll(); + return; + } + if (reloaded && !options.reloadAll) { console.log('[HMR] css reload %s', src.join(' ')); } else { @@ -165,7 +172,7 @@ module.exports = function(moduleId, options) { } } - return debounce(update, 10); + return debounce(update, 50); }; " `;