import Vue from ‘vue‘
import SvgIcon from ‘@/components/SvgIcon‘// svg component
// register globally
Vue.component(‘svg-icon‘, SvgIcon)
const req = require.context(‘./svg‘, false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
复制代码
require.context的官方介绍: webpack.js.org/guides/depe…
此处require.context()方法生成了一个类require方法,这个方法接收一个参数req,根据这个参数我们可以得到相应的模块信息。 比如传入svg目录下的404.svg文件名,req(‘./404.svg‘),就会返回相对应的模块。
且这个类require方法有keys()方法,可以遍历获得目录下所有的子文件名。
所以结合起来就是
const requireAll = requireContext => requireContext.keys().map(requireContext)
复制代码
也就是
const requireAll = requireContext => requireContext.keys().map(i => requireContext(i))
复制代码
用这个方法就能实现快速引入。