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

最新推荐文章于 2025-05-11 17:30:59 发布

lihefei_coder

最新推荐文章于 2025-05-11 17:30:59 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签：前端工程化 Webpack require.context 批量导入模块

本文链接：https://blog.csdn.net/lihefei_coder/article/details/103620408

webpack 专栏收录该内容

6 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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;  
}, {});