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;
+}
+

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

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

test/cases/split-chunks-recursiveIssuer/webpack.config.js

@@ -0,0 +1,54 @@
+import { version as webpackVersion } from 'webpack';
+
+import Self from '../../../src';
+
+function recursiveIssuer(m) {
+  if (m.issuer) {
+    return recursiveIssuer(m.issuer);
+  }
+
+  // eslint-disable-next-line no-underscore-dangle
+  const chunks = webpackVersion === '4' ? m._chunks : m.getChunks();
+
+  for (const chunk of chunks) {
+    return chunk.name;
+  }
+
+  return false;
+}
+
+module.exports = {
+  entry: {
+    a: './a.js',
+    b: './b.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, 'css-loader'],
+      },
+    ],
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        aStyles: {
+          name: 'styles_a',
+          test: (m, c, entry = 'a') =>
+            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
+          chunks: 'all',
+          enforce: true,
+        },
+        bStyles: {
+          name: 'styles_b',
+          test: (m, c, entry = 'b') =>
+            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
+          chunks: 'all',
+          enforce: true,
+        },
+      },
+    },
+  },
+  plugins: [new Self()],
+};