How to generate dynamic import chunk name in Webpack
From webpack docs:
webpackChunkName: A name for the new chunk. Since webpack 2.6.0, the placeholders [index] and [request] are supported within the given string to an incremented number or the actual resolved filename respectively.
You can use [request]
placeholder to set dynamic chunk name.
A basic example would be:
const cat = "Cat";
import(
/* webpackChunkName: "[request]" */
`./animals/${cat}`
);
So the chunk name will be Cat
. But if you put the string Cat
in the path, [request]
will throw a warning during the build saying request was undefined
.
So this will not work:
import(
/* webpackChunkName: "[request]" */
"./animals/Cat"
);
Finally, your code would look something like this:
bootStrapApps(config) {
config.apps.forEach((element) => {
registerApplication(
// Name of our single-spa application
element.name,
// Our loading function
() =>
import(/* webpackChunkName: "[request]" */ `../../${config.rootfolder}/${
element.name
}/app.bootstrap.js`),
// Our activity function
() => true
);
});
start();
}
Look at this GitHub issue for more help. https://github.com/webpack/webpack/issues/4807
PS: Those comments are called webpack magic comments.
You also can use chunkFilename
in webpack config file.
It's available with babel-plugin-syntax-dynamic-import
.
It seems to me chunkFilename
in config is more convenient sometimes than webpackChunkName
in each file
See details in https://medium.com/@anuhosad/code-splitting-in-webpack-with-dynamic-imports-4385b3760ef8