How can I import dynamically scripts without bundle them together?

353 Views Asked by At

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

0

There are 0 best solutions below