vue使用webpack做什么处理（webpack中的require.context使用详解）
vue使用webpack做什么处理（webpack中的require.context使用详解）import Vue from 'vue' import SvgIcon from '@/components/SvgIcon'// svg component Vue.component('svg-icon' SvgIcon) const context = require.context('./svg' false /\.svg$/) context.keys().map(context)更多Vue实战技巧可以参考专栏：Vue实战系列const context = require.context('./svg' false /\.svg$/) console.log(context.keys()) //context.keys().forEach(element => { // c
前面我们通过Vue实战060：require与import的区别和使用我们知道require是用来加载模块文件，成功后导出exports 对象。当我们需要批量引入多个模块的时候require及显得有点吃力了，这时候我们就可以利用webpack中require.context方法来实现该功能，它会遍历文件夹中的指定文件并自动导入。
require.context函数接受三个参数，分别是要搜索的文件夹目录、是否搜索子目录、匹配文件的正则表达式。其语法结构如：require.context(String directory Boolean useSubdirectories RegExp regExp)，返回一个webpackContex(req)函数。这个在Vue项目中处理svg图标的时候我们就用到了该函数，用来获取文件夹中的所有svg图标。
//在当前目录下查找后缀以.svg结尾的文件，递归子目录
const context = require.context('./svg' false /\.svg$/)
console.log(context);
//打印结果，返回一个函数
ƒ webpackContext(req) {
var id = webpackContextResolve(req);
return __webpack_require__(id);
}
webpackContex(req)函数提供了3个属性，分别是keys、resolve和id。其中keys是一个函数，它返回一个数组，由所有可能被此 context module 处理的请求组成；由所有可能被上下文模块处理的请求组成。resolve 也是一个函数，，它返回 request 被解析后得到的模块 id；id 是上下文模块里面所包含的模块 id。
打印下console.log(context.keys())方法，我们可以看到keys方法返回了一个带当前路径的文件名的数组。遍历可以使用方法forEach来实现，element指的就是数组中的每个元素了。
const context = require.context('./svg' false /\.svg$/)
console.log(context.keys())
//context.keys().forEach(element => {
// console.log(element);
//});
该方法需要传入一个参数，该参数为文件的键值，也就是从context.keys()中获取到的文件相对执行文件的路径名，返回一个该文件相对项目根目录的相对路径。
const context = require.context('./svg' false /\.svg$/)
context.keys().forEach(element => {
console.log(element) //打印当前文件所在的相对目录
console.log(context.resolve(element)); //打印相对项目根目录的相对路径
});
打印context.id属性console.log(context.id)，我们可以获取到一串字符串：“./src/assets/icons/svg sync \.svg$”，指明了我们所导入的文件目录及导入的文件类型。
具体的SVG使用方法可以参考：Vue实战034：使用SVG图标详解，这里主要说下批量载入svg图标处理。前面我们遍历数组是通过forEach来实现，因为我们只是想打印下数据中的每个元素而已。如果我们想拿到数组中的每个元素的话forEach无法return出来，因为forEach没有返回值。这里我们使用另一个方法map()，该方法会调用数组中每一项元素来创建一个新数组，新数组中的元素为原始数组元素调用函数处理后的结果。
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
Vue.component('svg-icon' SvgIcon)
const context = require.context('./svg' false /\.svg$/)
context.keys().map(context)
更多Vue实战技巧可以参考专栏：Vue实战系列
