如何在Webpack项目中高效加载多个mod文件，避免重复import？

下面给你几个高效的批量加载方案，不用手动写20次import：

1. 用Webpack的require.context自动遍历导入 #

Webpack内置了require.context方法，可以一次性匹配并导入指定目录下的所有符合规则的文件，这是最直接的方案。

示例代码（main.ts）：

// 匹配mod目录下所有.ts结尾的文件，不递归子目录
const modContext = require.context('./mods', false, /\.ts$/)

// 遍历所有匹配到的模块
modContext.keys().forEach(key => {
  // 导入模块（如果是默认导出取.default，具名导出则用对应名称）
  const ModClass = modContext(key).default
  // 实例化并执行mod的方法（假设执行方法叫run）
  const modInstance = new ModClass()
  modInstance.run()
})

• 参数说明：require.context(目标目录, 是否递归子目录, 文件匹配正则)

2. 封装统一的Mod入口文件 #

如果需要对部分mod做特殊处理（比如调整加载顺序、跳过特定mod），可以建一个入口文件统一管理：

比如创建mods/index.ts：

const modContext = require.context('./', false, /\.ts$/)
const mods: any[] = []

modContext.keys().forEach(key => {
  // 跳过当前index.ts文件
  if (key === './index.ts') return
  const ModClass = modContext(key).default
  mods.push(new ModClass())
})

export default mods

然后在main.ts里只需要一行导入：

import mods from './mods'

// 遍历执行所有mod的方法
mods.forEach(mod => mod.run())

3. 动态异步加载（适合非首屏必需的Mod） #

如果你的mod不需要在页面初始化时就加载，可以用动态import()结合Promise.all实现异步加载，优化首屏性能：

// 定义所有mod的路径（也可以用require.context生成路径数组）
const modPaths = [
  './mods/mod1.ts',
  './mods/mod2.ts',
  // ... 其他mod路径
]

// 批量异步加载并执行
Promise.all(modPaths.map(path => import(path)))
  .then(modules => {
    modules.forEach(module => {
      const ModClass = module.default
      const modInstance = new ModClass()
      modInstance.run()
    })
  })

内容的提问来源于stack exchange，提问作者Nuro007