fix: compatibility with webpack@4 and webpack@5 for monorepos (#636)

Author: evilebottnawi

src/index.js

@@ -20,8 +20,6 @@ const {
  util: { createHash },
 } = webpack;
 
-const isWebpack4 = webpackVersion[0] === '4';
-
 const pluginName = 'mini-css-extract-plugin';
 
 const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/i;
@@ -97,16 +95,12 @@ class MiniCssExtractPlugin {
  this.options.chunkFilename = '[id].css';
  }
  }
-
- if (!isWebpack4 && 'hmr' in this.options) {
- throw new Error(
- "The 'hmr' option doesn't exist for the mini-css-extract-plugin when using webpack 5 (it's automatically determined)"
- );
- }
  }
 
  /** @param {import("webpack").Compiler} compiler */
  apply(compiler) {
+ const isWebpack4 = compiler.webpack ? false : webpackVersion[0] === '4';
+
  if (!isWebpack4) {
  const { splitChunks } = compiler.options.optimization;
  if (splitChunks) {
@@ -200,7 +194,9 @@ class MiniCssExtractPlugin {
 
  // We don't need hot update chunks for css
  // We will use the real asset instead to update
- if (chunk instanceof webpack.HotUpdateChunk) return;
+ if (chunk instanceof webpack.HotUpdateChunk) {
+ return;
+ }
 
  const renderedModules = Array.from(
  this.getChunkModules(chunk, chunkGraph)
@@ -439,7 +435,10 @@ class MiniCssExtractPlugin {
  } else {
  const enabledChunks = new WeakSet();
  const handler = (chunk, set) => {
- if (enabledChunks.has(chunk)) return;
+ if (enabledChunks.has(chunk)) {
+ return;
+ }
+
  enabledChunks.add(chunk);
 
  // eslint-disable-next-line global-require

src/loader.js

@@ -16,8 +16,6 @@ import schema from './loader-options.json';
 
 const pluginName = 'mini-css-extract-plugin';
 
-const isWebpack4 = webpackVersion[0] === '4';
-
 function hotLoader(content, context) {
  const accept = context.locals
  ? ''
@@ -105,6 +103,8 @@ export function pitch(request) {
 
  let source;
 
+ const isWebpack4 = childCompiler.webpack ? false : webpackVersion[0] === '4';
+
  if (isWebpack4) {
  childCompiler.hooks.afterCompile.tap(pluginName, (compilation) => {
  source =