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 !
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 !
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
Thank you for your help !
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.