Webpack ES6 demo repo does not build/chunk correctly

I pulled down the babylonjs-webpack-es6 repository and built it in an effort to learn more about split chunk control for babylon webpack builds.

From the guide here Code splitting and Chunks using known bundlers | Babylon.js Documentation it claims that when I use the split chunk optimization in my webpack config I should only see 4 chunks alongside my main.mjs bundle. (webgpu-shaders.mjs, webgpu-extensions.mjs, webgl-shaders.mjs, and babylonBundle.mjs).

However, when I do a fresh clean build on the repo I still see the various chunk files as shown at the top of the guide. See from my cloned repo dist:

While working on a webpack babylon project of my own I ran into an odd issue where when I built my package locally, the dist would be filled with tons of generated chunk files, but if my gitlab pipeline built my changes the produced package would have the split chunk cache group in the dist as expected.

With this result I am partial to thinking the issue is something with my machine, but I am not sure at all what the cause is.

All I need to do to reproduce the issue is pull down a clean clone of the example repo and build it using npm run build from the package.json
I have made no changes to the repo. Any thoughts on how I can get the split chunk cache groups to work on a local build would be very helpful.

Thank you

My installed npm version is 10.2.1
My installed node version is 20.18.2

1 Like

cc @ryantrem / @AlitarSemiramis

2 Likes

Looking!

Looking at the webpack docs, when checking the split-chunks-plugin here:

SplitChunksPlugin | webpack

I found the following warning:

Warning
When files paths are processed by webpack, they always contain / on Unix systems and \ on Windows. That’s why using [\\/] in {cacheGroup}.test fields is necessary to represent a path separator. / or \ in {cacheGroup}.test will cause issues when used cross-platform.

If you edit the file webpack.common.js and change the current separators \/ for [\\/], then it will work as expected. Example:

test: (module) => /\/node_modules\/@babylonjs\//.test(module.resource),

Would become:

test: (module) => /[\\/]node_modules[\\/]@babylonjs[\\/]/.test(module.resource),

Then after you run npm run build, you will see the following in your dist folder after building:

Given that this is Raanan repo I’ll check with the team about submitting a PR to address this, thank you for pointing it out!

2 Likes

PR here:

Fixing escaping in webpack config file by VicenteCartas · Pull Request #56 · RaananW/babylonjs-webpack-es6

1 Like