webpack如何动态引入文件

113 阅读 0 评论 75 点赞

我是靠谱客的博主天真手套，最近开发中收集的这篇文章主要介绍webpack如何动态引入文件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这次给大家带来webpack如何动态引入文件，webpack动态引入文件的注意事项有哪些，下面就是实战案例，一起来看一下。

刚开始使用webpack时，可能很多人都会有过这样的想法，在require文件时，能不能不写静态的字符串路径，而是使用一个更灵活的方式，比如定义一个变量，根据具体的运行情况来确定需要require哪个文件！

比如，笔者就遇到了一个这样的需求。

当时是使用vue-router开发一个管理系统，管理系统自身有一个目录数组，而vue-router也需要一个route配置数组，而这两者恰恰是对应关系的。当时就想，能不能只维护一个目录数组，然后动态的生成route数组呢？

于是我实现了一个小demo，如下：

// 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')
 });
}
登录后复制

大致如上，当时没留源码，大概手写个例子，忽略一些可能的语法错误。

当使用这段代码运行的时候，就开始报错了：Critical dependencies。

在查了一些资料后，我大致明白了webpack的运行机制，也明白了一个事实，那就是：使用webpack动态require文件是不可能实现的。

要知道，webpack是一个打包工具，它运行的时机属于预编译，而我们的想法呢，要在运行时才能确定到底要require哪些文件，这显然是不行的，因为这样，webpack不知道该把哪些包打包起来，结果就是那些文件都没有被打包进去，那么require也肯定require不到啊。

明白了这个机制，我们就应该确定直接传递path来动态注册route是一种不可能实现的方案。

那么如果又想实现动态引入文件，怎么办呢？我们可以考虑一些曲线救国的方案。

1. 预编译阶段确定require路径。

我们之所以使用动态的变量来存储路径字符串，无非是想要程序替我们执行一些动作，比如拼接字符串等等。那么很多情况下这些程序在运行时执行和在预编译时执行是一样效果的。比如我们上面的例子，就是不想手动去维护两张表。那么我们可以在打包的时候，执行读写文件，来动态执行解析操作，并将解析得到的route数组写入指定的文件。这样不就实现了目标吗？

2.直接传递component对象呢？比如下面的实现方式：

// 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
 });
}
登录后复制

这种方案主要针对我们的例子，当然对其他情况也能给一个启发作用。

不过说来说去，这都是委曲求全的方案，我们必须明白一点，那就是在预编译阶段，webpack必须明确知道该引入哪些文件，否则什么方案都是不可行的。

顺便一提，网上还有说法require(path)，只要path不是纯变量，比如require('./root/' + path)，这样组合一下就行？我在这里require.ensure函数中尝试过，不行。也许是我使用方式不对吧。

再一提，传递component对象时，好像在跨文件时会有点问题，反正我是将目录数组和route数组以及解析过程写在一个文件的。也许是使用相对路径在不同文件中解析的问题，使用的时候需要注意下。

相信看了本文案例你已经掌握了方法，更多精彩请关注靠谱客其它相关文章！