引入同一个模块下的多个文件不需要重复import,vue和react同理

image.png

同一个目录下多个都需要引入不需要重复引入用一个webpack的api一行代码就可以实现
通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块，在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
分析require.context

require.context函数接受三个参数

directory {String} -读取文件的路径

useSubdirectories {Boolean} -是否遍历文件的子目录

regExp {RegExp} -匹配文件的正则

语法: require.context(directory, useSubdirectories = false, regExp = /^.//);
上面的import就可以直接用

const modulesFiles = require.context('./modules', true, /\.js$/)

实现