docs: update splitChunks info (#630)

Author: cap-Bernardito

README.md

@@ -710,11 +710,16 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 function recursiveIssuer(m) {
   if (m.issuer) {
     return recursiveIssuer(m.issuer);
-  } else if (m.name) {
-    return m.name;
-  } else {
-    return false;
   }
+
+  const chunks = m.getChunks();
+  // For webpack@4 chunks = m._chunks
+
+  for (const chunk of chunks) {
+    return chunk.name;
+  }
+
+  return false;
 }
 
 module.exports = {
@@ -726,14 +731,14 @@ module.exports = {
     splitChunks: {
       cacheGroups: {
         fooStyles: {
-          name: 'foo',
+          name: 'styles_foo',
           test: (m, c, entry = 'foo') =>
             m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
           chunks: 'all',
           enforce: true,
         },
         barStyles: {
-          name: 'bar',
+          name: 'styles_bar',
           test: (m, c, entry = 'bar') =>
             m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
           chunks: 'all',

test/cases/split-chunks-recursiveIssuer/a.css

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

test/cases/split-chunks-recursiveIssuer/a.js

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

test/cases/split-chunks-recursiveIssuer/b.css

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

test/cases/split-chunks-recursiveIssuer/b.js

@@ -0,0 +1,3 @@
+import './b.css';
+
+import(/* webpackChunkName: "comp2" */ './components/comp2');

test/cases/split-chunks-recursiveIssuer/components/comp1.css

@@ -0,0 +1,3 @@
+body {
+  background-color: yellow;
+}

test/cases/split-chunks-recursiveIssuer/components/comp1.js

@@ -0,0 +1 @@
+import './comp1.css';

test/cases/split-chunks-recursiveIssuer/components/comp2.css

@@ -0,0 +1,3 @@
+body {
+  background-color: green;
+}

test/cases/split-chunks-recursiveIssuer/components/comp2.js

@@ -0,0 +1 @@
+import './comp2.css';

test/cases/split-chunks-recursiveIssuer/expected/styles_a.css

@@ -0,0 +1,8 @@
+.class_a {
+  background: red;
+}
+
+body {
+  background-color: yellow;
+}
+