webpack如何动态引入文件

发布日期： 2018-03-17 阅读量： 作者： 网络

这次给大家带来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')
 });
}

# webpack # web # 文件

上一篇: 如何使用 CSS 实现拥有两个背景色的元素？

webpack如何动态引入文件

随便看看