前端项目批量导入文件

我们开发项目中可能碰到要引入多个文件的问题,如果一个一个的引入就不是很灵活，特别是本地大批量引入图片等一些静态资源的时候效率就很低下,还好webpack和vite提供了相应的方法可以批量引入

webpack提供了require.context vite 提供了import.meta.glob

一、require.context(webpack)

你还可以通过 require.context() 函数来创建自己的 context。 可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。 Webpack 会在构建中解析代码中的 require.context()

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);

示例

二、import.meta.glob(vite)

参考文档 cn.vitejs.dev/guide/featu…

示例: