refactor: remove deprecated hooks

src/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this */
 
-import webpack from 'webpack';
+import webpack, { version as webpackVersion } from 'webpack';
 
 import validateOptions from 'schema-utils';
 
@@ -17,13 +17,16 @@ const {
   util: { createHash },
 } = webpack;
 
+const isWebpack4 = webpackVersion[0] === '4';
+
 const MODULE_TYPE = 'css/mini-extract';
 
 const pluginName = 'mini-css-extract-plugin';
 
 const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/i;
 const REGEXP_CONTENTHASH = /\[contenthash(?::(\d+))?\]/i;
 const REGEXP_NAME = /\[name\]/i;
+const REGEXP_PLACEHOLDERS = /\[(name|id|chunkhash)\]/g;
 const DEFAULT_FILENAME = '[name].css';
 
 const compareIds = (a, b) => {
@@ -129,24 +132,15 @@ class MiniCssExtractPlugin {
     if (!this.options.chunkFilename) {
       const { filename } = this.options;
 
-      if (typeof filename !== 'function') {
-        const hasName = filename.includes('[name]');
-        const hasId = filename.includes('[id]');
-        const hasChunkHash = filename.includes('[chunkhash]');
-        const hasContentHash = filename.includes('[contenthash]');
-
-        // Anything changing depending on chunk is fine
-        if (hasChunkHash || hasContentHash || hasName || hasId) {
-          this.options.chunkFilename = filename;
-        } else {
-          // Otherwise prefix "[id]." in front of the basename to make it changing
-          this.options.chunkFilename = filename.replace(
-            /(^|\/)([^/]*(?:\?|$))/,
-            '$1[id].$2'
-          );
-        }
+      // Anything changing depending on chunk is fine
+      if (filename.match(REGEXP_PLACEHOLDERS)) {
+        this.options.chunkFilename = filename;
       } else {
-        this.options.chunkFilename = DEFAULT_FILENAME;
+        // Elsewise prefix '[id].' in front of the basename to make it changing
+        this.options.chunkFilename = filename.replace(
+          /(^|\/)([^/]*(?:\?|$))/,
+          '$1[id].$2'
+        );
       }
     }
   }
@@ -163,8 +157,7 @@ class MiniCssExtractPlugin {
         new CssDependencyTemplate()
       );
 
-      // Webpack 4
-      if (!compilation.hooks.renderManifest) {
+      if (isWebpack4) {
         compilation.mainTemplate.hooks.renderManifest.tap(
           pluginName,
           (result, { chunk }) => {
@@ -272,7 +265,11 @@ class MiniCssExtractPlugin {
         );
       }
 
-      if (typeof webpack.RuntimeModule === 'undefined') {
+      /*
+       * For webpack 5 this will be unneeded once the logic uses a RuntimeModule
+       * as the content of runtime modules is hashed and added to the chunk hash automatically
+       * */
+      if (isWebpack4) {
         compilation.mainTemplate.hooks.hashForChunk.tap(
           pluginName,
           (hash, chunk) => {
@@ -340,27 +337,24 @@ class MiniCssExtractPlugin {
         pluginName,
         (source, chunk, hash) => {
           const chunkMap = this.getCssChunkObject(chunk, compilation);
-          const isWebpackNext = typeof webpack.RuntimeGlobals !== 'undefined';
 
           if (Object.keys(chunkMap).length > 0) {
-            const maintemplateObject = isWebpackNext
-              ? compilation
-              : mainTemplate;
+            const maintemplateObject = isWebpack4 ? mainTemplate : compilation;
             const chunkMaps = chunk.getChunkMaps();
             const { crossOriginLoading } = maintemplateObject.outputOptions;
             const linkHrefPath = maintemplateObject.getAssetPath(
               JSON.stringify(this.options.chunkFilename),
               {
-                hash: isWebpackNext
-                  ? `" + ${webpack.RuntimeGlobals.getFullHash} + "`
-                  : `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
+                hash: isWebpack4
+                  ? `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`
+                  : `" + ${webpack.RuntimeGlobals.getFullHash} + "`,
                 hashWithLength: (length) =>
-                  isWebpackNext
-                    ? `" + ${webpack.RuntimeGlobals.getFullHash} + "`
-                    : `" + ${mainTemplate.renderCurrentHashCode(
+                  isWebpack4
+                    ? `" + ${mainTemplate.renderCurrentHashCode(
                         hash,
                         length
-                      )} + "`,
+                      )} + "`
+                    : `" + ${webpack.RuntimeGlobals.getFullHash} + "`,
                 chunk: {
                   id: '" + chunkId + "',
                   hash: `" + ${JSON.stringify(chunkMaps.hash)}[chunkId] + "`,
@@ -422,9 +416,9 @@ class MiniCssExtractPlugin {
                 Template.indent([
                   `var href = ${linkHrefPath};`,
                   `var fullhref = ${
-                    isWebpackNext
-                      ? '__webpack_require__'
-                      : mainTemplate.requireFn
+                    isWebpack4
+                      ? mainTemplate.requireFn
+                      : webpack.RuntimeGlobals.require
                   }.p + href;`,
                   'var existingLinkTags = document.getElementsByTagName("link");',
                   'for(var i = 0; i < existingLinkTags.length; i++) {',

src/loader.js

@@ -3,7 +3,7 @@ import NativeModule from 'module';
 import path from 'path';
 
 import loaderUtils from 'loader-utils';
-import webpack from 'webpack';
+import { version as webpackVersion } from 'webpack';
 import NodeTemplatePlugin from 'webpack/lib/node/NodeTemplatePlugin';
 import NodeTargetPlugin from 'webpack/lib/node/NodeTargetPlugin';
 import LibraryTemplatePlugin from 'webpack/lib/LibraryTemplatePlugin';
@@ -18,6 +18,8 @@ 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
     ? ''
@@ -129,8 +131,21 @@ export function pitch(request) {
 
   let source;
 
-  if (typeof webpack.RuntimeModule !== 'undefined') {
-    childCompiler.hooks.finishMake.tap(pluginName, (compilation) => {
+  if (isWebpack4) {
+    childCompiler.hooks.afterCompile.tap(pluginName, (compilation) => {
+      source =
+        compilation.assets[childFilename] &&
+        compilation.assets[childFilename].source();
+
+      // Remove all chunk assets
+      compilation.chunks.forEach((chunk) => {
+        chunk.files.forEach((file) => {
+          delete compilation.assets[file]; // eslint-disable-line no-param-reassign
+        });
+      });
+    });
+  } else {
+    childCompiler.hooks.compilation.tap(pluginName, (compilation) => {
       compilation.hooks.processAssets.tap(pluginName, () => {
         source =
           compilation.assets[childFilename] &&
@@ -144,19 +159,6 @@ export function pitch(request) {
         });
       });
     });
-  } else {
-    childCompiler.hooks.afterCompile.tap(pluginName, (compilation) => {
-      source =
-        compilation.assets[childFilename] &&
-        compilation.assets[childFilename].source();
-
-      // Remove all chunk assets
-      compilation.chunks.forEach((chunk) => {
-        chunk.files.forEach((file) => {
-          delete compilation.assets[file]; // eslint-disable-line no-param-reassign
-        });
-      });
-    });
   }
 
   const callback = this.async();