require.context - 实现前端工程自动化

1，webpack api，获取一个特定的上下文，自动化导入模块：遍历文件夹下的所有模块。

//三个参数：读取文件的路径、是否遍历文件的子目、匹配文件的正则
const requireContext = require.context('./svg', false, /\.svg$/)

// requireContext 是一个函数，该函数有三个属性： 
// resolve {Function} -接受一个参数req,req为svg文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径 
// keys {Function} keys().map( /** req */ )，匹配文件的路径 
// id 
// 同时 requireContext 作为一个函数,也接受一个req参数,而requireContext函数返回的是一个模块,这个模块才是真正我们需要的。 
// 这个Module模块和使用import导入的模块是一样的  

const requireContext = require.context('./svg', false, /\.svg$/) 
console.log(requireContext.resolve('./edit.svg')) // './src/icons/svg/edit.svg' 
requireContext.keys().map( requireContext ) // [Module] 导入模块

使用场景：将svg图标作为组件，导入全局项目中。（遍历文件 -> 全局注册）