chore: initial work on webpack 5 integration

Author: andriijas

package.json

@@ -9,7 +9,7 @@
   "bugs": "https://github.com/webpack-contrib/mini-css-extract-plugin/issues",
   "main": "dist/cjs.js",
   "engines": {
-    "node": ">= 6.9.0"
+    "node": ">=10.13.0"
   },
   "scripts": {
     "start": "npm run build -- -w",
@@ -36,7 +36,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "webpack": "^4.4.0"
+    "webpack": "^5.0.0"
   },
   "dependencies": {
     "loader-utils": "^1.1.0",
@@ -72,7 +72,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^1.18.2",
     "standard-version": "^6.0.1",
-    "webpack": "^4.35.3",
+    "webpack": "^5.0.0-beta.2",
     "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.7.2"
   },

src/index.js

@@ -139,85 +139,76 @@ class MiniCssExtractPlugin {
         new CssDependencyTemplate()
       );
 
-      compilation.mainTemplate.hooks.renderManifest.tap(
-        pluginName,
-        (result, { chunk }) => {
-          const renderedModules = Array.from(chunk.modulesIterable).filter(
-            (module) => module.type === MODULE_TYPE
-          );
+      compilation.hooks.renderManifest.tap(pluginName, (result, { chunk }) => {
+        const renderedModules = Array.from(chunk.modulesIterable).filter(
+          (module) => module.type === MODULE_TYPE
+        );
 
-          if (renderedModules.length > 0) {
-            result.push({
-              render: () =>
-                this.renderContentAsset(
-                  compilation,
-                  chunk,
-                  renderedModules,
-                  compilation.runtimeTemplate.requestShortener
-                ),
-              filenameTemplate: ({ chunk: chunkData }) =>
-                this.options.moduleFilename(chunkData),
-              pathOptions: {
+        if (renderedModules.length > 0) {
+          result.push({
+            render: () =>
+              this.renderContentAsset(
+                compilation,
                 chunk,
-                contentHashType: MODULE_TYPE,
-              },
-              identifier: `${pluginName}.${chunk.id}`,
-              hash: chunk.contentHash[MODULE_TYPE],
-            });
-          }
+                renderedModules,
+                compilation.runtimeTemplate.requestShortener
+              ),
+            filenameTemplate: ({ chunk: chunkData }) =>
+              this.options.moduleFilename(chunkData),
+            pathOptions: {
+              chunk,
+              contentHashType: MODULE_TYPE,
+            },
+            identifier: `${pluginName}.${chunk.id}`,
+            hash: chunk.contentHash[MODULE_TYPE],
+          });
         }
-      );
+      });
 
-      compilation.chunkTemplate.hooks.renderManifest.tap(
-        pluginName,
-        (result, { chunk }) => {
-          const renderedModules = Array.from(chunk.modulesIterable).filter(
-            (module) => module.type === MODULE_TYPE
-          );
+      compilation.hooks.renderManifest.tap(pluginName, (result, { chunk }) => {
+        const renderedModules = Array.from(chunk.modulesIterable).filter(
+          (module) => module.type === MODULE_TYPE
+        );
 
-          if (renderedModules.length > 0) {
-            result.push({
-              render: () =>
-                this.renderContentAsset(
-                  compilation,
-                  chunk,
-                  renderedModules,
-                  compilation.runtimeTemplate.requestShortener
-                ),
-              filenameTemplate: this.options.chunkFilename,
-              pathOptions: {
+        if (renderedModules.length > 0) {
+          result.push({
+            render: () =>
+              this.renderContentAsset(
+                compilation,
                 chunk,
-                contentHashType: MODULE_TYPE,
-              },
-              identifier: `${pluginName}.${chunk.id}`,
-              hash: chunk.contentHash[MODULE_TYPE],
-            });
-          }
+                renderedModules,
+                compilation.runtimeTemplate.requestShortener
+              ),
+            filenameTemplate: this.options.chunkFilename,
+            pathOptions: {
+              chunk,
+              contentHashType: MODULE_TYPE,
+            },
+            identifier: `${pluginName}.${chunk.id}`,
+            hash: chunk.contentHash[MODULE_TYPE],
+          });
         }
-      );
+      });
 
-      compilation.mainTemplate.hooks.hashForChunk.tap(
-        pluginName,
-        (hash, chunk) => {
-          const { chunkFilename } = this.options;
+      compilation.hooks.chunkHash.tap(pluginName, (hash, chunk) => {
+        const { chunkFilename } = this.options;
 
-          if (REGEXP_CHUNKHASH.test(chunkFilename)) {
-            hash.update(JSON.stringify(chunk.getChunkMaps(true).hash));
-          }
+        if (REGEXP_CHUNKHASH.test(chunkFilename)) {
+          hash.update(JSON.stringify(chunk.getChunkMaps(true).hash));
+        }
 
-          if (REGEXP_CONTENTHASH.test(chunkFilename)) {
-            hash.update(
-              JSON.stringify(
-                chunk.getChunkMaps(true).contentHash[MODULE_TYPE] || {}
-              )
-            );
-          }
+        if (REGEXP_CONTENTHASH.test(chunkFilename)) {
+          hash.update(
+            JSON.stringify(
+              chunk.getChunkMaps(true).contentHash[MODULE_TYPE] || {}
+            )
+          );
+        }
 
-          if (REGEXP_NAME.test(chunkFilename)) {
-            hash.update(JSON.stringify(chunk.getChunkMaps(true).name));
-          }
+        if (REGEXP_NAME.test(chunkFilename)) {
+          hash.update(JSON.stringify(chunk.getChunkMaps(true).name));
         }
-      );
+      });
 
       compilation.hooks.contentHash.tap(pluginName, (chunk) => {
         const { outputOptions } = compilation;