I'm trying to dynamically import a script with webpack's magic comments ( using commons chunk plugin ) depending on the some user action.
I've tried this ( lets say that the user's action would load the 'a' script ):
const paths = {
a: './commons/a',
b: './commons/b',
c: 'commons/c'
};
const x = 'a';
import(/* webpackChunkName: "commons.[request]" */ paths[x]).then(Module => {
});
It didn't work. All I've got was an error:
Error: Cannot find module "."
So I've tried this:
const paths = {
a: './commons/a',
b: './commons/b',
c: 'commons/c'
};
const x = 'a';
import(/* webpackChunkName: "commons.[request]" */ `.commons/ ${paths[x]}`).then(Module => {
});
It worked but not in the way that I'd imagine it. All of my scripts inside the commmons
folder were bundled together into one big file ( 0.js ) returned in the promise.
My question is: How can I load them separately? Is there a way to name them too?
Thanks