【webpack】和【vite】中获取本地文件夹目录下的所有图片

1. webpack（require.context）

     
	 const systemUrls = ref<{ url: string; name: string }[]>([]);

	 // 获取该目录下的所有svg文件
      const files = require.context('public/icon', false, /\.svg$/);
      systemUrls.value = files.keys().map((key) => {
        const fileName = key.split('/').pop(); // 提取文件名部分
        return {
          url: files(key), // base64编码的url
          name: fileName, // 文件名(带后缀)
        };
      });

require.context(directory, useSubdirectories, regExp)

directory：要搜索的目录
useSubdirectories：是否还搜索其子目录
regExp：匹配文件的正则表达式。

注意：传递给 require.context 的参数必须是字面量！

webpack官方文档 （require.context 介绍）

2. vite（import.meta.glob）

 const files = import.meta.glob('/public/topology/*.svg', { eager: true });

 systemUrls.value = Object.keys(files).map((path: any) => {
    const module = files[path] as any;
    const fileName = path?.split('/')?.pop(); // 提取文件名部分
    return {
      url: module.default, // 图片相对路径（/public/icon/DNS服务.svg）
      name: fileName, // 文件名(带后缀)
    };
  });
};

注意：vite 中不支持require

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块，匹配到的文件默认是懒加载。

const modules = import.meta.glob('./dir/*.js')

以上将会被转译为下面的样子：

// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js'),
}

同步加载：传入 { eager: true } 作为第二个参数

const modules = import.meta.glob('./dir/*.js', { eager: true })

// vite 转译生成的代码
import * as __glob__0_0 from './dir/foo.js'
import * as __glob__0_1 from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1,
}

多个匹配模式：第一个参数为数组

const modules = import.meta.glob(['./dir/*.js', './another/*.js'])

反面匹配模式：使用 ！ 排除查找目录中的某些文件

const modules = import.meta.glob(['./dir/*.js', '!**/bar.js'])

import.meta.glob是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
第一个文件路径：必须是相对路径（以./开头）或绝对路径（以 / 开头，相对于项目根目录解析）或一个别名路径 (resolve.alias)

Vite官方中文文档 （import.meta.glob介绍）