Webpack 动态引入文件的方法与技巧探究

// directory

let dir = [

 {

 name: 'a',

 path: '/a',

 componentPath: './a.vue'

 },

 { 

 ...

 }

];

let route = [];

for (let i = 0; i  require.ensure([], () => r(require(item.componentPath)), 'demo')

 });

}

// directory

let dir = [

 {

 name: 'a',

 path: '/a',

 component: r => require.ensure([], () => r(require('./a.vue')), 'demo')

 },

 { 

 ...

 }

];

let route = [];

for (let i = 0; i <p style="text-align: left;">这种方案主要针对我们的例子，当然对其他情况也能给一个启发作用。</p><p style="text-align: left;">不过说来说去，这都是委曲求全的方案，我们必须明白一点，那就是在预编译阶段，webpack必须明确知道该引入哪些文件，否则什么方案都是不可行的。</p><p style="text-align: left;">顺便一提，网上还有说法require(path)，只要path不是纯变量，比如require('./root/' + path)，这样组合一下就行？我在这里require.ensure函数中尝试过，不行。也许是我使用方式不对吧。</p><p style="text-align: left;">再一提，传递component对象时，好像在跨文件时会有点问题，反正我是将目录数组和route数组以及解析过程写在一个文件的。也许是使用相对路径在不同文件中解析的问题，使用的时候需要注意下。</p><p>相信看了本文案例你已经掌握了方法，更多精彩请关注-其它相关文章！</p><p>推荐阅读：</p><p><a href="http://www.php-/js-tutorial-389030.html" target="_blank">babel的使用详解</a><br></p><p><a href="http://www.php-/js-tutorial-389019.html" target="_blank">JS仿经典传奇游戏</a><br></p>