前端工程化 Webpack require.context() 批量导入模块

Webpack批量导入模块

最新推荐文章于 2025-03-26 13:56:24 发布

原创最新推荐文章于 2025-03-26 13:56:24 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端工程化 #Webpack #require.context #批量导入模块

webpack 专栏收录该内容

6 篇文章

订阅专栏

随着前端项目规模扩大，手动导入大量模块变得繁琐。本文介绍Webpack的require.context()方法，用于批量导入模块，简化代码，提高开发效率。

随着前端业务的复杂程度不断攀升，项目的体量越来越庞大，文件数量也相应倍增。

当一个大栏目需要手动导入几十上百个模块时，这简直就是噩梦：

import a from './modules/a.js';
import b from './modules/b.js';
import c from './modules/c.js';
import d from './modules/d.js';
import 100+... 

const modules = {
	a,
	b,
	c,
	d,
	100+...
};
卒....

Webpack有个开挂批量导入方法：

require.context()

语法：

require.context(directory, includeSubdirs, filter, mode)

require.context函数接收4个参数：

directory {String} 读取文件的路径
includeSubdirs {Boolean} 是否遍历文件夹的子目录
filter {RegExp} 过滤文件的正则
mode {String} 加载方式

下面是webpack官方API的介绍：
在这里插入图片描述

接下来就可以猛踩油门飙车了：

const files = require.context('./modules', true, /\.js$/); //批量读取模块文件

const modules = files.keys().reduce((modules, path) => {
    const name = path.replace(/^\.\/(.*)\.js$/, '$1');
    const module = files(path); 
    modules[name] = module.default;
    return modules;  
}, {});