Skip to content

Commit 00e329d

Browse files
feat: automating module detection (#163)
* feat: automating module detection * test: updating tests * docs: updating readme
1 parent e79875e commit 00e329d

File tree

5 files changed

+21
-29
lines changed

5 files changed

+21
-29
lines changed

README.md

-24
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@ module.exports = {
8282
options: {
8383
hot: true, // if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config
8484
reloadAll: true, // when desperation kicks in - this is a brute force HMR flag
85-
8685
}
8786
},
8887
"css-loader"
@@ -298,29 +297,6 @@ new ExtractCssChunk({
298297

299298
>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.
300299
301-
### HMR Troubleshooting
302-
**Blank array in HMR script?**
303-
304-
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
305-
306-
```js
307-
rules: [
308-
{
309-
test: /\.css$/,
310-
use: [
311-
ExtractCssChunks.hotLoader, // for those who want to manually force hotLoading
312-
ExtractCssChunks.loader,
313-
{
314-
loader: 'css-loader',
315-
options: {
316-
modules: true,
317-
localIdentName: '[name]__[local]--[hash:base64:5]',
318-
},
319-
},
320-
],
321-
},
322-
]
323-
```
324300

325301
### HMR Pitfall
326302

src/hmr/hotModuleReplacement.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,13 @@ module.exports = function(moduleId, options) {
154154
function update() {
155155
var src = getScriptSrc(options.filename);
156156
var reloaded = reloadStyle(src);
157+
158+
if (options.locals) {
159+
console.log('[HMR] Detected local css modules. Reload all css');
160+
reloadAll();
161+
return;
162+
}
163+
157164
if (reloaded && !options.reloadAll) {
158165
console.log('[HMR] css reload %s', src.join(' '));
159166
} else {
@@ -162,5 +169,5 @@ module.exports = function(moduleId, options) {
162169
}
163170
}
164171

165-
return debounce(update, 10);
172+
return debounce(update, 50);
166173
};

src/index.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -484,8 +484,7 @@ class ExtractCssChunksPlugin {
484484
if (this.options.orderWarning) {
485485
compilation.warnings.push(
486486
new Error(
487-
`chunk ${chunk.name ||
488-
chunk.id} [extract-css-chunks-webpack-plugin]\n` +
487+
`chunk ${chunk.name || chunk.id} [${pluginName}]\n` +
489488
'Conflicting order between:\n' +
490489
` * ${fallbackModule.readableIdentifier(
491490
requestShortener

src/loader.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@ function hotLoader(content, context) {
2222
var cssReload = require(${loaderUtils.stringifyRequest(
2323
context.context,
2424
path.join(__dirname, 'hmr/hotModuleReplacement.js')
25-
)})(module.id, ${JSON.stringify(context.query)});
25+
)})(module.id, ${JSON.stringify({
26+
...context.query,
27+
locals: !!context.locals,
28+
})});
2629
module.hot.dispose(cssReload);
2730
${accept}
2831
}

test/__snapshots__/TestCases.test.js.snap

+8-1
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,13 @@ module.exports = function(moduleId, options) {
157157
function update() {
158158
var src = getScriptSrc(options.filename);
159159
var reloaded = reloadStyle(src);
160+
161+
if (options.locals) {
162+
console.log('[HMR] Detected local css modules. Reload all css');
163+
reloadAll();
164+
return;
165+
}
166+
160167
if (reloaded && !options.reloadAll) {
161168
console.log('[HMR] css reload %s', src.join(' '));
162169
} else {
@@ -165,7 +172,7 @@ module.exports = function(moduleId, options) {
165172
}
166173
}
167174
168-
return debounce(update, 10);
175+
return debounce(update, 50);
169176
};
170177
"
171178
`;

0 commit comments

Comments
 (0)