Refactor code

src/CssDependencyTemplate.js

@@ -0,0 +1,4 @@
+export default class CssDependencyTemplate {
+  // eslint-disable-next-line class-methods-use-this
+  apply() {}
+}

src/CssModule.js

@@ -0,0 +1,68 @@
+import webpack from 'webpack';
+
+import { MODULE_TYPE } from './utils';
+
+export default class CssModule extends webpack.Module {
+  constructor(dependency) {
+    super(MODULE_TYPE, dependency.context);
+
+    this.id = '';
+    this._identifier = dependency.identifier;
+    this._identifierIndex = dependency.identifierIndex;
+    this.content = dependency.content;
+    this.media = dependency.media;
+    this.sourceMap = dependency.sourceMap;
+  }
+
+  // no source() so webpack doesn't do add stuff to the bundle
+
+  size() {
+    return this.content.length;
+  }
+
+  identifier() {
+    return `css ${this._identifier} ${this._identifierIndex}`;
+  }
+
+  readableIdentifier(requestShortener) {
+    return `css ${requestShortener.shorten(this._identifier)}${
+      this._identifierIndex ? ` (${this._identifierIndex})` : ''
+    }`;
+  }
+
+  nameForCondition() {
+    const resource = this._identifier.split('!').pop();
+    const idx = resource.indexOf('?');
+
+    if (idx >= 0) {
+      return resource.substring(0, idx);
+    }
+
+    return resource;
+  }
+
+  updateCacheModule(module) {
+    this.content = module.content;
+    this.media = module.media;
+    this.sourceMap = module.sourceMap;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  needRebuild() {
+    return true;
+  }
+
+  build(options, compilation, resolver, fileSystem, callback) {
+    this.buildInfo = {};
+    this.buildMeta = {};
+    callback();
+  }
+
+  updateHash(hash, context) {
+    super.updateHash(hash, context);
+
+    hash.update(this.content);
+    hash.update(this.media || '');
+    hash.update(this.sourceMap ? JSON.stringify(this.sourceMap) : '');
+  }
+}

src/CssModuleFactory.js

@@ -0,0 +1,8 @@
+import CssModule from './CssModule';
+
+export default class CssModuleFactory {
+  // eslint-disable-next-line class-methods-use-this
+  create({ dependencies: [dependency] }, callback) {
+    callback(null, new CssModule(dependency));
+  }
+}

src/index.js

@@ -4,8 +4,11 @@ import webpack, { version as webpackVersion } from 'webpack';
 
 import validateOptions from 'schema-utils';
 
+import CssModuleFactory from './CssModuleFactory';
+import CssDependencyTemplate from './CssDependencyTemplate';
 import CssDependency from './CssDependency';
 import schema from './plugin-options.json';
+import { MODULE_TYPE, compareModulesByIdentifier } from './utils';
 
 // webpack 5 exposes the sources property to ensure the right version of webpack-sources is used
 const { ConcatSource, SourceMapSource, OriginalSource } =
@@ -19,8 +22,6 @@ const {
 
 const isWebpack4 = webpackVersion[0] === '4';
 
-const MODULE_TYPE = 'css/mini-extract';
-
 const pluginName = 'mini-css-extract-plugin';
 
 const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/i;
@@ -29,93 +30,6 @@ const REGEXP_NAME = /\[name\]/i;
 const REGEXP_PLACEHOLDERS = /\[(name|id|chunkhash)\]/g;
 const DEFAULT_FILENAME = '[name].css';
 
-const compareIds = (a, b) => {
-  if (typeof a !== typeof b) {
-    return typeof a < typeof b ? -1 : 1;
-  }
-  if (a < b) return -1;
-  if (a > b) return 1;
-  return 0;
-};
-
-const compareModulesByIdentifier = (a, b) => {
-  return compareIds(a.identifier(), b.identifier());
-};
-
-class CssDependencyTemplate {
-  apply() {}
-}
-
-class CssModule extends webpack.Module {
-  constructor(dependency) {
-    super(MODULE_TYPE, dependency.context);
-
-    this.id = '';
-    this._identifier = dependency.identifier;
-    this._identifierIndex = dependency.identifierIndex;
-    this.content = dependency.content;
-    this.media = dependency.media;
-    this.sourceMap = dependency.sourceMap;
-  }
-
-  // no source() so webpack doesn't do add stuff to the bundle
-
-  size() {
-    return this.content.length;
-  }
-
-  identifier() {
-    return `css ${this._identifier} ${this._identifierIndex}`;
-  }
-
-  readableIdentifier(requestShortener) {
-    return `css ${requestShortener.shorten(this._identifier)}${
-      this._identifierIndex ? ` (${this._identifierIndex})` : ''
-    }`;
-  }
-
-  nameForCondition() {
-    const resource = this._identifier.split('!').pop();
-    const idx = resource.indexOf('?');
-
-    if (idx >= 0) {
-      return resource.substring(0, idx);
-    }
-
-    return resource;
-  }
-
-  updateCacheModule(module) {
-    this.content = module.content;
-    this.media = module.media;
-    this.sourceMap = module.sourceMap;
-  }
-
-  needRebuild() {
-    return true;
-  }
-
-  build(options, compilation, resolver, fileSystem, callback) {
-    this.buildInfo = {};
-    this.buildMeta = {};
-    callback();
-  }
-
-  updateHash(hash, context) {
-    super.updateHash(hash, context);
-
-    hash.update(this.content);
-    hash.update(this.media || '');
-    hash.update(this.sourceMap ? JSON.stringify(this.sourceMap) : '');
-  }
-}
-
-class CssModuleFactory {
-  create({ dependencies: [dependency] }, callback) {
-    callback(null, new CssModule(dependency));
-  }
-}
-
 class MiniCssExtractPlugin {
   constructor(options = {}) {
     validateOptions(schema, options, 'Mini CSS Extract Plugin');

src/loader.js

@@ -1,5 +1,3 @@
-import NativeModule from 'module';
-
 import path from 'path';
 
 import loaderUtils from 'loader-utils';
@@ -13,7 +11,7 @@ import NormalModule from 'webpack/lib/NormalModule';
 import validateOptions from 'schema-utils';
 
 import CssDependency from './CssDependency';
-
+import { findModuleById, evalModuleCode } from './utils';
 import schema from './loader-options.json';
 
 const pluginName = 'mini-css-extract-plugin';
@@ -41,33 +39,6 @@ function hotLoader(content, context) {
   `;
 }
 
-function evalModuleCode(loaderContext, code, filename) {
-  const module = new NativeModule(filename, loaderContext);
-
-  module.paths = NativeModule._nodeModulePaths(loaderContext.context); // eslint-disable-line no-underscore-dangle
-  module.filename = filename;
-  module._compile(code, filename); // eslint-disable-line no-underscore-dangle
-
-  return module.exports;
-}
-
-function findModuleById(compilation, id) {
-  const { modules, chunkGraph } = compilation;
-
-  for (const module of modules) {
-    const moduleId =
-      typeof chunkGraph !== 'undefined'
-        ? chunkGraph.getModuleId(module)
-        : module.id;
-
-    if (moduleId === id) {
-      return module;
-    }
-  }
-
-  return null;
-}
-
 export function pitch(request) {
   const options = loaderUtils.getOptions(this) || {};
 

src/utils.js

@@ -0,0 +1,57 @@
+import NativeModule from 'module';
+
+const MODULE_TYPE = 'css/mini-extract';
+
+function findModuleById(compilation, id) {
+  const { modules, chunkGraph } = compilation;
+
+  for (const module of modules) {
+    const moduleId =
+      typeof chunkGraph !== 'undefined'
+        ? chunkGraph.getModuleId(module)
+        : module.id;
+
+    if (moduleId === id) {
+      return module;
+    }
+  }
+
+  return null;
+}
+
+function evalModuleCode(loaderContext, code, filename) {
+  const module = new NativeModule(filename, loaderContext);
+
+  module.paths = NativeModule._nodeModulePaths(loaderContext.context); // eslint-disable-line no-underscore-dangle
+  module.filename = filename;
+  module._compile(code, filename); // eslint-disable-line no-underscore-dangle
+
+  return module.exports;
+}
+
+function compareIds(a, b) {
+  if (typeof a !== typeof b) {
+    return typeof a < typeof b ? -1 : 1;
+  }
+
+  if (a < b) {
+    return -1;
+  }
+
+  if (a > b) {
+    return 1;
+  }
+
+  return 0;
+}
+
+function compareModulesByIdentifier(a, b) {
+  return compareIds(a.identifier(), b.identifier());
+}
+
+export {
+  MODULE_TYPE,
+  findModuleById,
+  evalModuleCode,
+  compareModulesByIdentifier,
+};

test/cases/dependOn-multiple-files-per-entry/expected/webpack-5/common.js

@@ -162,17 +162,14 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 			__webpack_require__.x = () => {
 /******/ 		
 /******/ 			}
-/******/ 			jsonpArray = jsonpArray.slice();
-/******/ 			for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
+/******/ 			chunkLoadingGlobal = chunkLoadingGlobal.slice();
+/******/ 			for(var i = 0; i < chunkLoadingGlobal.length; i++) webpackJsonpCallback(chunkLoadingGlobal[i]);
 /******/ 			return (checkDeferredModules = checkDeferredModulesImpl)();
 /******/ 		};
 /******/ 		
 /******/ 		// install a JSONP callback for chunk loading
-/******/ 		function webpackJsonpCallback(data) {
-/******/ 			var chunkIds = data[0];
-/******/ 			var moreModules = data[1];
-/******/ 			var executeModules = data[2];
-/******/ 			var runtime = data[3];
+/******/ 		var webpackJsonpCallback = (data) => {
+/******/ 			var [chunkIds, moreModules, runtime, executeModules] = data;
 /******/ 			// add "moreModules" to the modules object,
 /******/ 			// then flag all "chunkIds" as loaded and fire callback
 /******/ 			var moduleId, chunkId, i = 0, resolves = [];
@@ -189,7 +186,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 				}
 /******/ 			}
 /******/ 			if(runtime) runtime(__webpack_require__);
-/******/ 			if(parentJsonpFunction) parentJsonpFunction(data);
+/******/ 			parentChunkLoadingFunction(data);
 /******/ 			while(resolves.length) {
 /******/ 				resolves.shift()();
 /******/ 			}
@@ -199,12 +196,11 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 		
 /******/ 			// run deferred modules when all chunks ready
 /******/ 			return checkDeferredModules();
-/******/ 		};
+/******/ 		}
 /******/ 		
-/******/ 		var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
-/******/ 		var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
-/******/ 		jsonpArray.push = webpackJsonpCallback;
-/******/ 		var parentJsonpFunction = oldJsonpFunction;
+/******/ 		var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
+/******/ 		var parentChunkLoadingFunction = chunkLoadingGlobal.push.bind(chunkLoadingGlobal);
+/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback;
 /******/ 	})();
 /******/ 	
 /************************************************************************/

test/cases/dependOn-multiple-files-per-entry/expected/webpack-5/entry1.js

@@ -1,4 +1,4 @@
-(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[1],[
 /* 0 */,
 /* 1 */,
 /* 2 */,
@@ -37,4 +37,5 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
 /***/ })
-],[[6,0],[4,0]]]);
+],
+0,[[6,0],[4,0]]]);