title: Webpack 4 splitchunks, how to force common chunks?
body: <p>I'm trying to split a project into commons chunks, it'was easy with the old commonChunks plugin because the project is designed to be splitted into kinds of libraries...
  With the new splitChunks i cannot achieve the same result. So i came back to a basic test to try to understand the new splitChunks, unfortunatley i'm facing sames problems. 
  Here the configuration file :</p>
  
  <pre><code>const webpack = require('webpack'); //to access built-in plugins
  const path = require('path');
  
  var PROD = JSON.parse(process.env.PROD_ENV || '0');
  
  const groupsOptions = {chunks: "all", minSize:0, minChunks: 1, reuseExistingChunk: true, enforce: true};
  
  const reactConfig = {
      entry: {
          "react": ["react", "react-dom"],
          "pageA": "./src/A.jsx",
          "pageB": "./src/B.jsx",
          "pageC": "./src/C.jsx",
          "pageD": "./src/D.jsx",
          "commonAB": [ "./src/ab_a.js", "./src/ab_b.js"],
          "commonCD": ["./src/cd_c.js", "./src/cd_d.js"]
      },
      output: {
          path: __dirname + '/build/',
          filename: PROD
              ? "[name].min.js"
              : "[name].js"
      },
      module: {
          rules: [
              {
                  test: /\.jsx$/,
                  use: {
                      loader: "babel-loader",
                      options: {
                          presets: ["es2015", "react"]
                      }
                  }
              }
          ]
      },
      optimization: {
          splitChunks: {
              cacheGroups:{
                  react: {test:'react', name: "react", ...groupsOptions},
                  AB: {test:'commonAB', name: "commonAB", ...groupsOptions},
                  CD: {test:'commonCD', name: "commonCD", ...groupsOptions}
              }
          }
      },
      plugins: [
          // new webpack.optimize.CommonsChunkPlugin({
          //     name: "react",
          //     filename: "react.js",
          //     chunks: ["pageA", "pageB"]
          // }),
          // new webpack.optimize.CommonsChunkPlugin({
          //     name: "commonAB",
          //     chunks: ["pageA", "pageB"]
          // })
          //new webpack.optimize.UglifyJsPlugin()
      ]
  };
  </code></pre>
  
  <p>With that config i can achieve this output, that is exactly what i want to do  :</p>
  
  <pre><code>      Asset      Size    Chunks             Chunk Names
  commonAB.js  1.67 KiB  commonAB  [emitted]  commonAB
  commonCD.js  1.67 KiB  commonCD  [emitted]  commonCD
     pageA.js   8.1 KiB     pageA  [emitted]  pageA
     pageB.js  8.15 KiB     pageB  [emitted]  pageB
     pageC.js   8.1 KiB     pageC  [emitted]  pageC
     pageD.js   8.1 KiB     pageD  [emitted]  pageD
     react.js   631 KiB     react  [emitted]  react
  Entrypoint pageA = react.js commonAB.js pageA.js
  Entrypoint pageB = react.js commonAB.js pageB.js
  Entrypoint pageC = react.js commonCD.js pageC.js
  Entrypoint pageD = react.js commonCD.js pageD.js
  [./src/A.jsx] 2.51 KiB {pageA} [built]
  [./src/B.jsx] 2.56 KiB {pageB} [built]
  [./src/C.jsx] 2.51 KiB {pageC} [built]
  [./src/D.jsx] 2.51 KiB {pageD} [built]
  [./src/ab_a.js] 122 bytes {commonAB} [built]
  [./src/ab_b.js] 122 bytes {commonAB} [built]
  [./src/cd_c.js] 122 bytes {commonCD} [built]
  [./src/cd_d.js] 122 bytes {commonCD} [built]
     [0] multi react react-dom 40 bytes {react} [built]
     [1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {commonAB} [built]
     [2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {commonCD} [built]
      + 23 hidden modules
  </code></pre>
  
  <p>This exemple is very simple and everything is OK ! </p>
  
  <ul>
  <li>pageA depends from react and commonAB -> OK</li>
  <li>pageB depends from react and commonAB -> OK</li>
  <li>pageC depends from react and commonCD -> OK</li>
  <li>pageD depends from react and commonCD -> OK</li>
  </ul>
  
  <p>But then, when i modify the code of <strong>ab_a.js</strong> and add </p>
  
  <pre><code>import React from 'react';
  </code></pre>
  
  <p>the output is :</p>
  
  <pre><code>&gt; webpack --config src.config.js --colors --progress --watch --mode development
  
   10% building modules 3/3 modules 0 active
  Webpack is watching the files…
                                                                                                                                                                                                        Hash: 020e818e618248278134
  Version: webpack 4.2.0
  Time: 1900ms
  Built at: 2018-3-22 11:03:21
        Asset      Size    Chunks             Chunk Names
  commonAB.js  1.94 KiB  commonAB  [emitted]  commonAB
  commonCD.js  1.67 KiB  commonCD  [emitted]  commonCD
     pageA.js   8.1 KiB     pageA  [emitted]  pageA
     pageB.js  8.15 KiB     pageB  [emitted]  pageB
     pageC.js  8.11 KiB     pageC  [emitted]  pageC
     pageD.js  8.11 KiB     pageD  [emitted]  pageD
     react.js   631 KiB     react  [emitted]  react
  Entrypoint pageA = commonAB.js react.js pageA.js
  Entrypoint pageB = commonAB.js react.js pageB.js
  Entrypoint pageC = commonAB.js react.js commonCD.js pageC.js
  Entrypoint pageD = commonAB.js react.js commonCD.js pageD.js
  [./src/A.jsx] 2.51 KiB {pageA} [built]
  [./src/B.jsx] 2.56 KiB {pageB} [built]
  [./src/C.jsx] 2.51 KiB {pageC} [built]
  [./src/D.jsx] 2.51 KiB {pageD} [built]
  [./src/ab_a.js] 152 bytes {commonAB} [built]
  [./src/ab_b.js] 122 bytes {commonAB} [built]
  [./src/cd_c.js] 122 bytes {commonCD} [built]
  [./src/cd_d.js] 122 bytes {commonCD} [built]
     [0] multi react react-dom 40 bytes {react} [built]
     [1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {commonAB} [built]
     [2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {commonCD} [built]
      + 23 hidden modules
  </code></pre>
  
  <p>As you can see pageC and pageD depends of commonAB.js that is not the case !
  This exemple is very simple and everything is OK ! </p>
  
  <ul>
  <li>pageA depends from react and commonAB -> OK</li>
  <li>pageB depends from react and commonAB -> OK</li>
  <li>pageC depends from react and commonAB AND commonCD -> Wrong</li>
  <li>pageD depends from react and commonAB AND commonCD -> Wrong</li>
  </ul>
  
  <p>Furthermore if i had <em>import React from 'react';</em> into cs_c.js (has expected, but not has i want) i have output :</p>
  
  <pre><code>      Asset      Size    Chunks             Chunk Names
  commonAB.js  1.94 KiB  commonAB  [emitted]  commonAB
  commonCD.js  1.94 KiB  commonCD  [emitted]  commonCD
     pageA.js  8.11 KiB     pageA  [emitted]  pageA
     pageB.js  8.16 KiB     pageB  [emitted]  pageB
     pageC.js  8.11 KiB     pageC  [emitted]  pageC
     pageD.js  8.11 KiB     pageD  [emitted]  pageD
     react.js   631 KiB     react  [emitted]  react
  Entrypoint pageA = commonCD.js commonAB.js react.js pageA.js
  Entrypoint pageB = commonCD.js commonAB.js react.js pageB.js
  Entrypoint pageC = commonCD.js commonAB.js react.js pageC.js
  Entrypoint pageD = commonCD.js commonAB.js react.js pageD.js
  [./src/A.jsx] 2.51 KiB {pageA} [built]
  [./src/B.jsx] 2.56 KiB {pageB} [built]
  [./src/C.jsx] 2.51 KiB {pageC} [built]
  [./src/D.jsx] 2.51 KiB {pageD} [built]
  [./src/ab_a.js] 152 bytes {commonAB} [built]
  [./src/ab_b.js] 122 bytes {commonAB} [built]
  [./src/cd_c.js] 152 bytes {commonCD} [built]
  [./src/cd_d.js] 122 bytes {commonCD} [built]
     [0] multi react react-dom 40 bytes {react} [built]
     [1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {commonAB} [built]
     [2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {commonCD} [built]
      + 23 hidden modules
  </code></pre>
  
  <ul>
  <li>pageA depends from react and commonAB AND commonCD -> Wrong </li>
  <li>pageB depends from react and commonAB AND commonCD -> Wrong </li>
  <li>pageC depends from react and commonAB AND commonCD -> Wrong </li>
  <li>pageD depends from react and commonAB AND commonCD -> Wrong</li>
  </ul>
  
  <p>Thank you for your help !</p>