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  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  p './root/' + path)，这样组合一下就行？我在这里require.ensure函数中尝试过，不行。也许是我使用方式不对吧。 /p p >
以上就是webpack如何动态引入文件的详细内容，更多请关注php中文网其它相关文章！
 
  
 最佳 Windows 性能的顶级免费优化软件
 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。