Reputation: 3257
How does the bundling happens when you use something like this:
const module = import(`folder1/${someExpression}`);
I mean, I do understand when you pass a plain string to it, but how does webpack understands all the possible outcomes?
Is this a good pattern?
Does it bundle all the files from that folder?
If so, it bundles them all together and does it recursively?
Upvotes: 10
Views: 6999
Reputation: 3257
So, I bumped into this question that gave me an idea on how it works and what to search for. I am posting here so it can help someone else.
The key here is to use Magic Comments. From the the docs:
Inline comments to make features work. By adding comments to the import, we can do things such as name our chunk or select different modes.
webpackMode
It will tell how webapack should bundle your assets. You mark your imports as such:
import(/* webpackMode: "lazy" */`./locales/${language}.json`)
./locales/${language}.json
), where multiple module paths that can potentially be requested.You can also make use of combinations with other magic comments, such as:
/* webpackMode: "lazy-once", webpackChunkName: "all-i18n-data", webpackPrefetch: true */
,
/* webpackMode: "lazy", webpackChunkName: "[request]", webpackPreload: true */
,
I hope it helps! For something a little more in depth:
Upvotes: 13