webpack下实现动态引入文件

最新推荐文章于 2024-08-08 23:53:19 发布

_小刀

最新推荐文章于 2024-08-08 23:53:19 发布

阅读量1w

点赞数

分类专栏：前端文章标签： vue require webpack

本文链接：https://blog.csdn.net/u014445339/article/details/72730155

版权

本文探讨了在webpack环境下，如何尝试动态require文件。由于webpack的预编译特性，直接通过变量动态引入文件是不可行的。作者提出了两种替代方案：1. 预编译阶段确定require路径，通过读写文件在打包时动态生成route数组；2. 直接传递component对象。但强调在预编译阶段，webpack必须明确知道引入的文件。

摘要由CSDN通过智能技术生成

刚开始使用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')
  });
}

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

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