Webpack: What is the difference between “all” and “initial” options in optimization.splitChunks.chunks

Trying for the simplest explanation. This is the file that will be transpiled and bundled:

//app.js
import "my-static-module";

if(some_condition_is_true){
  import ("my-dynamic-module")
}
console.log("My app is running")

Now see how different optimization types will treat it.

async (default):

Two files will be created.

1. bundle.js (includes app.js + my-static-module)
2. chunk.js (includes my-dynamic-module only)

initial:

Three files will be created

1. app.js (includes only app.js)
2. bundle.js (includes only my-static-module)
3. chunk.js (includes only my-dynamic-module)

all:

Two files will be created

1. app.js (includes app.js only)
2. bundle.js (includes my-static-module + my-dynamic-module)

“all” will have the smallest overall size.