javascript - Webpack 4 splitchunks, how to force common chunks?

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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 :
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()
With that config i can achieve this output, that is exactly what i want to do  :
      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
This exemple is very simple and everything is OK ! 
pageA depends from react and commonAB -> OK
pageB depends from react and commonAB -> OK
pageC depends from react and commonCD -> OK
pageD depends from react and commonCD -> OK
But then, when i modify the code of ab_a.js and add 
import React from 'react';
the output is :
> 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
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 ! 
pageA depends from react and commonAB -> OK
pageB depends from react and commonAB -> OK
pageC depends from react and commonAB AND commonCD -> Wrong
pageD depends from react and commonAB AND commonCD -> Wrong
Furthermore if i had import React from 'react'; into cs_c.js (has expected, but not has i want) i have output :
      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
pageA depends from react and commonAB AND commonCD -> Wrong 
pageB depends from react and commonAB AND commonCD -> Wrong 
pageC depends from react and commonAB AND commonCD -> Wrong 
pageD depends from react and commonAB AND commonCD -> Wrong
Thank you for your help !
                If you think this is a Webpack4 bug, may I suggest you report it here -> github.com/webpack/webpack/issues
– Keith
                Mar 22, 2018 at 10:38
                Eventually i have submitted a report to github as you suggested ! Il will come back here to give the result of this request.
– Coolhand
                Mar 30, 2018 at 13:15
After more talks on github, and more researches ... this configuration is working like a charm:
const webpack = require('webpack');
const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');
var PROD = JSON.parse(process.env.PROD_ENV || '0');
const groupsOptions = {chunks: "all", minSize:0, minChunks: 1, reuseExistingChunk: true, enforce: true};
const reactConfig = {
    entry: {
        "pageA": "./src/A.jsx",
        "pageB": "./src/B.jsx",
        "pageC": "./src/C.jsx",
        "pageD": "./src/D.jsx"
    output: {
        path: __dirname + '/build/',
        filename: PROD
            ? "[name].min.js"
            : "[name].js"
    module: {
        rules: [
                test: /\.jsx$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["es2015", "react"]
    optimization: {
    namedModules: true,
    runtimeChunk: true, // <-- to avoid all hashes of generated file change every time a piece of code change in 1 file ... (and spare 4kb)
        splitChunks: {
            chunks: 'all',
            name : false,
            cacheGroups:{
                react: {test:/react/, name: "react", ...groupsOptions},
                AB: {test:/ab_a.js/, name: "commonAB", ...groupsOptions},
                AB: {test:/ab_b.js/, name: "commonAB", ...groupsOptions},
                CD: {test:/cd_c.js/ , name: "commonAB", ...groupsOptions},
                CD: {test:/cd_d.js/, name: "commonCD", ...groupsOptions}
    plugins: [
        new ManifestPlugin({})
producing the desired output :
> npm run build
> testcommon@1.0.0 build D:\dev\testCommon
> webpack --config src.config.js --colors --progress --watch --mode development
  0% compiling
Webpack is watching the files…
                                                                                                                                                                                                                                  Hash: 3ab0d2c347627bd736f0
Version: webpack 4.4.1
Time: 1917ms
Built at: 2018-4-3 10:26:02
        Asset       Size    Chunks             Chunk Names
  commonAB.js  657 bytes  commonAB  [emitted]  commonAB
  commonCD.js  987 bytes  commonCD  [emitted]  commonCD
     pageA.js   34.7 KiB     pageA  [emitted]  pageA
     pageB.js   34.7 KiB     pageB  [emitted]  pageB
     pageC.js   34.4 KiB     pageC  [emitted]  pageC
     pageD.js   34.4 KiB     pageD  [emitted]  pageD
     react.js    655 KiB     react  [emitted]  react
manifest.json  196 bytes            [emitted]
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.49 KiB {pageA} [built]
[./src/B.jsx] 2.49 KiB {pageB} [built]
[./src/C.jsx] 2.49 KiB {pageC} [built]
[./src/D.jsx] 2.49 KiB {pageD} [built]
[./src/ab_a.js] 191 bytes {pageB} {pageA} [built]
[./src/ab_b.js] 116 bytes {commonAB} [built]
[./src/cd_c.js] 148 bytes {pageD} {pageC} [built]
[./src/cd_d.js] 191 bytes {commonCD} [built]
Which is simplier than previous Commons Chunks Plugin...
  Thanks to ooflorent and sokra from the webpack project on github.
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.