fix: do not crash on using [fullhash] (#695)

Author: alexander-akait

package-lock.json

@@ -48,9 +48,9 @@
     "webpack-sources": "^1.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
+    "@babel/cli": "^7.12.13",
+    "@babel/core": "^7.12.13",
+    "@babel/preset-env": "^7.12.13",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@webpack-contrib/defaults": "^6.3.0",
@@ -63,20 +63,20 @@
     "del": "^6.0.0",
     "del-cli": "^3.0.1",
     "es-check": "^5.2.0",
-    "eslint": "^7.18.0",
+    "eslint": "^7.19.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-import": "^2.22.1",
     "file-loader": "^6.2.0",
     "husky": "^4.3.8",
     "jest": "^26.6.3",
     "jsdom": "^16.4.0",
-    "lint-staged": "^10.5.3",
+    "lint-staged": "^10.5.4",
     "memfs": "^3.0.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "standard-version": "^9.1.0",
-    "webpack": "^5.18.0",
-    "webpack-cli": "^4.4.0",
+    "webpack": "^5.21.1",
+    "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.7.2"
   },
   "keywords": [

package.json

@@ -480,8 +480,12 @@ class MiniCssExtractPlugin {
 
           enabledChunks.add(chunk);
 
-          // eslint-disable-next-line global-require
-          const CssLoadingRuntimeModule = require('./CssLoadingRuntimeModule');
+          if (
+            typeof this.options.chunkFilename === 'string' &&
+            /\[(full)?hash(:\d+)?\]/.test(this.options.chunkFilename)
+          ) {
+            set.add(webpack.RuntimeGlobals.getFullHash);
+          }
 
           set.add(webpack.RuntimeGlobals.publicPath);
 
@@ -503,6 +507,10 @@ class MiniCssExtractPlugin {
               true
             )
           );
+
+          // eslint-disable-next-line global-require
+          const CssLoadingRuntimeModule = require('./CssLoadingRuntimeModule');
+
           compilation.addRuntimeModule(
             chunk,
             new CssLoadingRuntimeModule(set, this.runtimeOptions)

src/index.js

@@ -179,14 +179,16 @@ describe('TestCases', () => {
               );
             } else {
               const matchAll = res.match(
-                /__webpack_require__\.h = \(\) => "([\d\w].*)"/i
+                /__webpack_require__\.h = \(\) => \(("[\d\w].*")\)/i
               );
 
               const replacer = new Array(matchAll[1].length);
 
               res = res.replace(
-                /__webpack_require__\.h = \(\) => "([\d\w].*)"/i,
-                `__webpack_require__.h = () => "${replacer.fill('x').join('')}"`
+                /__webpack_require__\.h = \(\) => \(("[\d\w].*")\)/i,
+                `__webpack_require__.h = () => ("${replacer
+                  .fill('x')
+                  .join('')}")`
               );
             }
 

test/TestCases.test.js

@@ -0,0 +1,3 @@
+.async {
+  color: red;
+}

test/cases/chunkFilename-fullhash/async.css

@@ -0,0 +1,4 @@
+.async {
+  color: red;
+}
+

test/cases/chunkFilename-fullhash/expected/webpack-5/0.ff87ec1bb4052c4f3445.css

@@ -0,0 +1,13 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[0],{
+
+/***/ 2:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+
+}]);

test/cases/chunkFilename-fullhash/expected/webpack-5/async.js

@@ -0,0 +1,4 @@
+body {
+  background: red;
+}
+