Implement dynamic import of files in webpack

Now I will share with you a method to dynamically introduce files under webpack. It has a good reference value and I hope it will be helpful to everyone.

When I first started using webpack, many people may have had this idea. When requiring a file, can I not write a static string path, but use a more flexible method, such as defining a variable? , 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)), &#39;demo&#39;)
 });
}

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 curveball solutions 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 the component object 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 doesn'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.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Using the swiper component in vue2.0 to implement carousel (detailed tutorial)

About using Compass in Vue specific method?

How to turn off the caching function of Vue computed properties? What are the specific steps?

The above is the detailed content of Implement dynamic import of files in webpack. For more information, please follow other related articles on the PHP Chinese website!