利用webpack的require.context()实现动态导入

type

status

date

slug

summary

利用require.context()自动化导入

如果页面需要调用多个组件时，需要写大量重复代码进行声明，如下：

利用webpack提供的APIrequire.context()创建自己的上下文,实现自动化导入。

webpack官方文档：可以使用require.context()函数创建自己的上下文。它允许传入要搜索的目录、指示是否也应该搜索子目录的标志和用于匹配文件的正则表达式。webpack在构建时在代码中解析require.context()。

require.contenxt()的返回值并不是如预期一样返回遍历的文件对象，而是返回一个函数，如下：

通过阅读可以看到需要使用keys属性，来得到文件名数组。

这时还不是我们想要的模块，需要将文件名带入返回的方法中，得到真正的modules，再通过modeles的default获得导出的默认模块，如下：

此时才获得真正的模块，进行组件的声明,如下：

通过这个API可以打开新世界的大门，可以代替各种声明代码，例如：

还有vue-router 动态添加路由等等，不再详细列举。