项目中利用webpack的require.context实现批量引入/导入图片

一、require.context

一个 webpack 的 api ，通过该函数可以获取一个上下文，从而实现工程自动化（遍历文件夹的文件，从中获取指定文件，自动导入模块）。

在前端工程中，如果一个文件夹中的模块需要频繁引用时可以使用该种方式一次性引入

二、require.context(directory,useSubdirectories,regExp)

参数	类型	描述
directory	String	需要读取模块的文件的所在目录
useSubdirectories	Boolean	是否遍历子目录
regExp	RegExp	匹配的规则（正则表达式）

// 遍历获取 api 目录下所有的 js 文件（包括子目录） require.context('@/api' , true, /(.js$)/);

三、返回结果

参数	类型	描述
resolve	Function	接受一个参数request，request为文件夹下面匹配文件的相对路径，返回这个匹配文件相对于整个工程的相对路径
keys	Function	返回一个数组，由匹配成功的文件所组成的数组
id	String	执行环境的 id

四、示例

vue组件

const req = require.context('@/components', false, /\.vue$/);
const requireAll = requireContext => requireContext.keys();
const re = /\.\/(.*)\.vue/;
//依赖组件
const componentNames = requireAll(req).map(i => {
    return i.match(re)[1];
});

let components = {};
componentNames.forEach(compName => {
    components[compName] = () => import(`@/components/${compName}.vue`);
});

图片

const reqImagesList = require.context('@/assets/images', false, /\.png$/);
const requireAll = requireContext => requireContext.keys();
const re = /\.\/(.*)\.png/;
//依赖
const imagesList = requireAll(reqImagesList).map(i => {
    return i.match(re)[1];
});

let images = {};
imagesList.forEach(compName => {
    images[compName] = require(`@/assets/images/${compName}.png`);
});