I'm trying to split a project into mons chunks, it'was easy with the old monChunks 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",
"monAB": [ "./src/ab_a.js", "./src/ab_b.js"],
"monCD": ["./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:'monAB', name: "monAB", ...groupsOptions},
CD: {test:'monCD', name: "monCD", ...groupsOptions}
}
}
},
plugins: [
// new webpack.optimize.CommonsChunkPlugin({
// name: "react",
// filename: "react.js",
// chunks: ["pageA", "pageB"]
// }),
// new webpack.optimize.CommonsChunkPlugin({
// name: "monAB",
// 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
monAB.js 1.67 KiB monAB [emitted] monAB
monCD.js 1.67 KiB monCD [emitted] monCD
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 monAB.js pageA.js
Entrypoint pageB = react.js monAB.js pageB.js
Entrypoint pageC = react.js monCD.js pageC.js
Entrypoint pageD = react.js monCD.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 {monAB} [built]
[./src/ab_b.js] 122 bytes {monAB} [built]
[./src/cd_c.js] 122 bytes {monCD} [built]
[./src/cd_d.js] 122 bytes {monCD} [built]
[0] multi react react-dom 40 bytes {react} [built]
[1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {monAB} [built]
[2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {monCD} [built]
+ 23 hidden modules
This exemple is very simple and everything is OK !
- pageA depends from react and monAB -> OK
- pageB depends from react and monAB -> OK
- pageC depends from react and monCD -> OK
- pageD depends from react and monCD -> 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
monAB.js 1.94 KiB monAB [emitted] monAB
monCD.js 1.67 KiB monCD [emitted] monCD
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 = monAB.js react.js pageA.js
Entrypoint pageB = monAB.js react.js pageB.js
Entrypoint pageC = monAB.js react.js monCD.js pageC.js
Entrypoint pageD = monAB.js react.js monCD.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 {monAB} [built]
[./src/ab_b.js] 122 bytes {monAB} [built]
[./src/cd_c.js] 122 bytes {monCD} [built]
[./src/cd_d.js] 122 bytes {monCD} [built]
[0] multi react react-dom 40 bytes {react} [built]
[1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {monAB} [built]
[2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {monCD} [built]
+ 23 hidden modules
As you can see pageC and pageD depends of monAB.js that is not the case ! This exemple is very simple and everything is OK !
- pageA depends from react and monAB -> OK
- pageB depends from react and monAB -> OK
- pageC depends from react and monAB AND monCD -> Wrong
- pageD depends from react and monAB AND monCD -> 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
monAB.js 1.94 KiB monAB [emitted] monAB
monCD.js 1.94 KiB monCD [emitted] monCD
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 = monCD.js monAB.js react.js pageA.js
Entrypoint pageB = monCD.js monAB.js react.js pageB.js
Entrypoint pageC = monCD.js monAB.js react.js pageC.js
Entrypoint pageD = monCD.js monAB.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 {monAB} [built]
[./src/ab_b.js] 122 bytes {monAB} [built]
[./src/cd_c.js] 152 bytes {monCD} [built]
[./src/cd_d.js] 122 bytes {monCD} [built]
[0] multi react react-dom 40 bytes {react} [built]
[1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {monAB} [built]
[2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {monCD} [built]
+ 23 hidden modules
- pageA depends from react and monAB AND monCD -> Wrong
- pageB depends from react and monAB AND monCD -> Wrong
- pageC depends from react and monAB AND monCD -> Wrong
- pageD depends from react and monAB AND monCD -> Wrong
Thank you for your help !
I'm trying to split a project into mons chunks, it'was easy with the old monChunks 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",
"monAB": [ "./src/ab_a.js", "./src/ab_b.js"],
"monCD": ["./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:'monAB', name: "monAB", ...groupsOptions},
CD: {test:'monCD', name: "monCD", ...groupsOptions}
}
}
},
plugins: [
// new webpack.optimize.CommonsChunkPlugin({
// name: "react",
// filename: "react.js",
// chunks: ["pageA", "pageB"]
// }),
// new webpack.optimize.CommonsChunkPlugin({
// name: "monAB",
// 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
monAB.js 1.67 KiB monAB [emitted] monAB
monCD.js 1.67 KiB monCD [emitted] monCD
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 monAB.js pageA.js
Entrypoint pageB = react.js monAB.js pageB.js
Entrypoint pageC = react.js monCD.js pageC.js
Entrypoint pageD = react.js monCD.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 {monAB} [built]
[./src/ab_b.js] 122 bytes {monAB} [built]
[./src/cd_c.js] 122 bytes {monCD} [built]
[./src/cd_d.js] 122 bytes {monCD} [built]
[0] multi react react-dom 40 bytes {react} [built]
[1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {monAB} [built]
[2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {monCD} [built]
+ 23 hidden modules
This exemple is very simple and everything is OK !
- pageA depends from react and monAB -> OK
- pageB depends from react and monAB -> OK
- pageC depends from react and monCD -> OK
- pageD depends from react and monCD -> 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
monAB.js 1.94 KiB monAB [emitted] monAB
monCD.js 1.67 KiB monCD [emitted] monCD
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 = monAB.js react.js pageA.js
Entrypoint pageB = monAB.js react.js pageB.js
Entrypoint pageC = monAB.js react.js monCD.js pageC.js
Entrypoint pageD = monAB.js react.js monCD.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 {monAB} [built]
[./src/ab_b.js] 122 bytes {monAB} [built]
[./src/cd_c.js] 122 bytes {monCD} [built]
[./src/cd_d.js] 122 bytes {monCD} [built]
[0] multi react react-dom 40 bytes {react} [built]
[1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {monAB} [built]
[2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {monCD} [built]
+ 23 hidden modules
As you can see pageC and pageD depends of monAB.js that is not the case ! This exemple is very simple and everything is OK !
- pageA depends from react and monAB -> OK
- pageB depends from react and monAB -> OK
- pageC depends from react and monAB AND monCD -> Wrong
- pageD depends from react and monAB AND monCD -> 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
monAB.js 1.94 KiB monAB [emitted] monAB
monCD.js 1.94 KiB monCD [emitted] monCD
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 = monCD.js monAB.js react.js pageA.js
Entrypoint pageB = monCD.js monAB.js react.js pageB.js
Entrypoint pageC = monCD.js monAB.js react.js pageC.js
Entrypoint pageD = monCD.js monAB.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 {monAB} [built]
[./src/ab_b.js] 122 bytes {monAB} [built]
[./src/cd_c.js] 152 bytes {monCD} [built]
[./src/cd_d.js] 122 bytes {monCD} [built]
[0] multi react react-dom 40 bytes {react} [built]
[1] multi ./src/ab_a.js ./src/ab_b.js 40 bytes {monAB} [built]
[2] multi ./src/cd_c.js ./src/cd_d.js 40 bytes {monCD} [built]
+ 23 hidden modules
- pageA depends from react and monAB AND monCD -> Wrong
- pageB depends from react and monAB AND monCD -> Wrong
- pageC depends from react and monAB AND monCD -> Wrong
- pageD depends from react and monAB AND monCD -> Wrong
Thank you for your help !
Share Improve this question edited Oct 6, 2018 at 19:30 Roman Pokrovskij 9,80421 gold badges97 silver badges153 bronze badges asked Mar 22, 2018 at 10:23 CoolhandCoolhand 1061 silver badge9 bronze badges 2- If you think this is a Webpack4 bug, may I suggest you report it here -> github./webpack/webpack/issues – Keith Commented Mar 22, 2018 at 10:38
- Eventually i have submitted a report to github as you suggested ! Il will e back here to give the result of this request. – Coolhand Commented Mar 30, 2018 at 13:15
1 Answer
Reset to default 3After 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: "monAB", ...groupsOptions},
AB: {test:/ab_b.js/, name: "monAB", ...groupsOptions},
CD: {test:/cd_c.js/ , name: "monAB", ...groupsOptions},
CD: {test:/cd_d.js/, name: "monCD", ...groupsOptions}
}
}
},
plugins: [
new ManifestPlugin({})
]
};
producing the desired output :
> npm run build
> [email protected] build D:\dev\testCommon
> webpack --config src.config.js --colors --progress --watch --mode development
0% piling
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
monAB.js 657 bytes monAB [emitted] monAB
monCD.js 987 bytes monCD [emitted] monCD
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 monAB.js pageA.js
Entrypoint pageB = react.js monAB.js pageB.js
Entrypoint pageC = react.js monCD.js pageC.js
Entrypoint pageD = react.js monCD.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 {monAB} [built]
[./src/cd_c.js] 148 bytes {pageD} {pageC} [built]
[./src/cd_d.js] 191 bytes {monCD} [built]
Which is simplier than previous Commons Chunks Plugin...
Thanks to ooflorent and sokra from the webpack project on github.