How webpack dynamically imports files

This time I will show you how webpack dynamically introduces files, and what are the precautions for webpack to dynamically introduce files. The following is a practical case, let's take a look.

When I first started using webpack, many people may have had this idea. When require the file, can I not write the static string path, but It is to use a more flexible method, such as defining a variable , and determine which file needs to be required based on the specific operating conditions!

For example, the author encountered such a need.

At that time, vue-router was used to develop a management system. The management system itself had a directory array, and vue-router also needed a route configuration array, and the two were exactly related. At that time, I was thinking, can I just maintain a directory array and then dynamically generate a route array?

So I implemented a small demo, as follows:

// directory
let dir = [
 {
 name: 'a',
 path: '/a',
 componentPath: './a.vue'
 },
 { 
 ...
 }
];
let route = [];
for (let i = 0; i < dir.length; ++i) {
 let item = dir[i];
 route.push({
 path: item.path,
 component: r => require.ensure([], () => r(require(item.componentPath)), 'demo')
 });
}

It’s roughly the same as above. I didn’t keep the source code at the time, so I wrote an example by hand and ignored some. Possible Syntax Error.

When running this code, errors begin to appear: Critical dependencies.

After checking some information, I roughly understood the operating mechanism of webpack, and also understood the fact that: It is impossible to use webpack dynamic require files.

You must know that webpack is a packaging tool, and the time it runs is pre-compilation. Our idea is to determine which files to require at runtime. This is obviously No, because of this, webpack doesn't know which packages to package. As a result, those files are not packaged, so require will definitely not be required.

Understanding this mechanism, we should determine that directly passing the path to dynamically register the route is an impossible solution.

So what should you do if you want to dynamically import files? We can consider some curved plans to save the country.

1. Determine the require path during the pre-compilation phase.

The reason why we use dynamic variables to store path strings is simply because we want the program to perform some actions for us, such as splicing strings and so on. In many cases, these programs have the same effect when executed at runtime as when executed during precompilation. For example, in our example above, we just don’t want to manually maintain two tables. Then we can read and write files during packaging to dynamically perform parsing operations, and write the parsed route array to the specified file. Doesn’t this achieve the goal?

2. What about passing componentobject directly? For example, the following implementation method:

// directory
let dir = [
 {
 name: 'a',
 path: '/a',
 component: r => require.ensure([], () => r(require('./a.vue')), 'demo')
 
 },
 { 
 ...
 }
];
let route = [];
for (let i = 0; i < dir.length; ++i) {
 let item = dir[i];
 route.push({
 path: item.path,
 component: item.component
 });
}

This solution is mainly for our example, of course, it can also provide an inspiration for other situations.

But after all, this is a compromise solution. We must understand that during the pre-compilation stage, webpack must clearly know which files to introduce, otherwise no solution will be feasible.

By the way, there is also a saying require(path) on the Internet. As long as path is not a pure variable, such as require('./root/' + path), can it be combined like this? I tried it in the require.ensure function here, but it didn't work. Maybe I'm using it the wrong way.

One more thing, when passing component objects, there seems to be some problems when crossing files. Anyway, I wrote the directory array, route array and parsing process in one file. Maybe it's a problem of using relative paths to parse in different files. You need to pay attention when using them.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of babel

##JS imitation classic legendary game

The above is the detailed content of How webpack dynamically imports files. For more information, please follow other related articles on the PHP Chinese website!