docs: update (#820)

Author: alexander-akait

README.md

@@ -753,8 +753,6 @@ module.exports = {
         styles: {
           name: "styles",
           type: "css/mini-extract",
-          // For webpack@4
-          // test: /\.css$/,
           chunks: "all",
           enforce: true,
         },
@@ -789,24 +787,6 @@ This also prevents the CSS duplication issue one had with the ExtractTextPlugin.
 const path = require("path");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-function recursiveIssuer(m, c) {
-  const issuer = c.moduleGraph.getIssuer(m);
-  // For webpack@4 issuer = m.issuer
-
-  if (issuer) {
-    return recursiveIssuer(issuer, c);
-  }
-
-  const chunks = c.chunkGraph.getModuleChunks(m);
-  // For webpack@4 chunks = m._chunks
-
-  for (const chunk of chunks) {
-    return chunk.name;
-  }
-
-  return false;
-}
-
 module.exports = {
   entry: {
     foo: path.resolve(__dirname, "src/foo"),
@@ -816,19 +796,19 @@ module.exports = {
     splitChunks: {
       cacheGroups: {
         fooStyles: {
+          type: "css/mini-extract",
           name: "styles_foo",
-          test: (m, c, entry = "foo") =>
-            m.constructor.name === "CssModule" &&
-            recursiveIssuer(m, c) === entry,
-          chunks: "all",
+          chunks: (chunk) => {
+            return chunk.name === "foo";
+          },
           enforce: true,
         },
         barStyles: {
+          type: "css/mini-extract",
           name: "styles_bar",
-          test: (m, c, entry = "bar") =>
-            m.constructor.name === "CssModule" &&
-            recursiveIssuer(m, c) === entry,
-          chunks: "all",
+          chunks: (chunk) => {
+            return chunk.name === "bar";
+          },
           enforce: true,
         },
       },

package-lock.json

@@ -66,6 +66,8 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	(() => {
 /******/ 		// This function allow to reference all chunks
 /******/ 		__webpack_require__.miniCssF = (chunkId) => {
+/******/ 			// return url for filenames not based on template
+/******/ 			if (chunkId === 1) return "" + __webpack_require__.h() + ".css";
 /******/ 			// return url for filenames based on template
 /******/ 			return "" + chunkId + "." + __webpack_require__.h() + ".css";
 /******/ 		};

test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js

@@ -66,6 +66,8 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	(() => {
 /******/ 		// This function allow to reference all chunks
 /******/ 		__webpack_require__.miniCssF = (chunkId) => {
+/******/ 			// return url for filenames not based on template
+/******/ 			if (chunkId === 1) return "" + __webpack_require__.h() + ".css";
 /******/ 			// return url for filenames based on template
 /******/ 			return "" + chunkId + "." + __webpack_require__.h() + ".css";
 /******/ 		};

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

@@ -79,7 +79,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 // eslint-disable-next-line no-console
-console.log({ css: _style_css__WEBPACK_IMPORTED_MODULE_0__.default, aClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.aClass, bClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.bClass, cClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.cClass });
+console.log({ css: _style_css__WEBPACK_IMPORTED_MODULE_0__["default"], aClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.aClass, bClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.bClass, cClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.cClass });
 
 })();
 

test/cases/es-named-export-output-module/expected/main.mjs

@@ -81,7 +81,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 // eslint-disable-next-line no-console
-console.log({ css: _style_css__WEBPACK_IMPORTED_MODULE_0__.default, aClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.aClass, bClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.bClass, cClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.cClass });
+console.log({ css: _style_css__WEBPACK_IMPORTED_MODULE_0__["default"], aClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.aClass, bClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.bClass, cClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.cClass });
 
 })();
 

test/cases/es-named-export/expected/main.js

@@ -365,7 +365,7 @@ module.exports = function (urlString) {
 /******/ 		// This function allow to reference all chunks
 /******/ 		__webpack_require__.miniCssF = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return undefined;
+/******/ 			return "" + "main" + ".css";
 /******/ 		};
 /******/ 	})();
 /******/ 	

test/cases/hmr/expected/main.js

@@ -0,0 +1,3 @@
+.class_a {
+  background: red;
+}

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/a.css

@@ -0,0 +1,5 @@
+import "./a.css";
+
+import(/* webpackChunkName: "common" */ "./common");
+
+import(/* webpackChunkName: "comp1" */ "./components/comp1");

test/cases/split-chunks-based-on-entry-with-common-chunk-and-inside-dir/a.js

@@ -0,0 +1,3 @@
+.class_b {
+  background: red;
+}