8000 Merge pull request #70 from faceyspacey/hot-loading · cemsusal/extract-css-chunks-webpack-plugin@c0ad958 · GitHub
Skip to content 8000

Commit c0ad958

Browse files
ScriptedAlchemyScriptedAlchemy
authored
Merge pull request faceyspacey#70 from faceyspacey/hot-loading
feat(src/index.js): Check for hot reloading before adding hot loaders Before adding hot reloading to the loader stack, make sure the build has some reference to hot reloading either in the entry-points or devServer
2 parents 6898cfa + a7a384c commit c0ad958

File tree

1 file changed

+38
-17
lines changed

1 file changed

+38
-17
lines changed

‎src/index.js‎

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import path from 'path';
44
import webpack from 'webpack';
55
import sources from 'webpack-sources';
66

7-
const thing = path.resolve(__dirname, './hotLoader.js');
7+
const hotLoader = path.resolve(__dirname, './hotLoader.js');
88

99
const { ConcatSource, SourceMapSource, OriginalSource } = sources;
1010
const { Template, util: { createHash } } = webpack;
@@ -17,6 +17,20 @@ const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/i;
1717
const REGEXP_CONTENTHASH = /\[contenthash(?::(\d+))?\]/i;
1818
const REGEXP_NAME = /\[name\]/i;
1919

20+
const isHMR = (compiler) => {
21+
if (compiler && compiler.options) {
22+
if (compiler.options.devServer && compiler.options.devServer.hot) {
23+
return true;
24+
}
25+
26+
if (compiler.options.entry) {
27+
const entryString = JSON.stringify(compiler.options.entry);
28+
return entryString.includes('hot') || entryString.includes('hmr');
29+
}
30+
}
31+
return false;
32+
};
33+
2034
class CssDependency extends webpack.Dependency {
2135
constructor(
2236
{ identifier, content, media, sourceMap },
@@ -132,24 +146,31 @@ class ExtractCssChunks {
132146
}
133147

134148
apply(compiler) {
135-
console.log('DevServerHot:', compiler.options.devServer.hot)
136-
// console.log(compiler.options)
137-
const updatedRules = compiler.options.module.rules.reduce((rules, rule) => {
138-
if (rule.use && Array.isArray(rule.use)) {
139-
const isMiniCss = rule.use.some((l) => {
140-
const needle = l.loader || l;
141-
return needle.includes(pluginName);
142-
});
143-
if (isMiniCss) {
144-
rule.use.unshift(thing);
145-
}
146-
}
147-
rules.push(rule);
149+
try {
150+
const isHOT = isHMR(compiler);
148151

149-
return rules;
150-
}, []);
152+
if (isHOT && compiler.options.module && compiler.options.module.rules) {
153+
const updatedRules = compiler.options.module.rules.reduce((rules, rule) => {
154+
if (rule.use && Array.isArray(rule.use)) {
155+
const isMiniCss = rule.use.some((l) => {
156+
const needle = l.loader || l;
157+
return needle.includes(pluginName);
158+
});
159+
if (isMiniCss) {
160+
rule.use.unshift(hotLoader);
161+
}
162+
}
163+
rules.push(rule);
164+
165+
return rules;
166+
}, []);
167+
168+
compiler.options.module.rules = updatedRules;
169+
}
170+
} catch (e) {
171+
console.error('Something went wrong: contact the author', e);
172+
}
151173

152-
compiler.options.module.rules = updatedRules;
153174

154175
compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
155176
compilation.hooks.normalModuleLoader.tap(pluginName, (lc, m) => {

0 commit comments

Comments
 (0)