A question about webpack require

for the following code, after testing, you can observe:

uses the @ root/test/test.js of the string, and the module can load on demand, loading the routing-related file

test/test

uses the variable @ root/$ {route} .js , but the modules are packaged together, and the relevant packages are loaded before the route is triggered

what is the cause of this problem? What should I do if I need to achieve on-demand loading? It feels cumbersome to write each route once.

Webpack4 es6 javascript webpack

Apr.23,2021

this should be a normal phenomenon. Webpack is a static baler, and all modules should be statically parsed, so when it encounters require ('xxxx'), it will parse which modules are contained in the string, so it is natural that all cases corresponding to route will be typed into the same package.

There is also a solution to

, which I have encountered before, using the loader of bundle-loader . The method of use is something like this:

require('bundle!./foo/bar/' + dynamicSegment);

As for the general principle of

, because we don't bother with webpack much now, we all use things like cli, and I can't remember clearly, but you can take a look at this issue , which should be similar issues discussed.

Previous: Js callback this problem

Next: Should business bogus deletion be designed like this?