如何通过Webpack合并多设备JSON配置文件，无需自定义JS脚本？

方案一：用Webpack自动合并所有配置 #

不用编写自定义遍历脚本，直接利用Webpack内置的require.context功能，在代码中动态扫描并合并所有设备配置：

// main.js 中添加以下代码
const deviceConfigs = {};
// 扫描 devices 目录下所有子文件夹里的 config.json
const configContext = require.context('./devices', true, /config\.json$/);

configContext.keys().forEach(filePath => {
  // 从文件路径中提取设备名称，比如 "./nintendo/config.json" 提取出 "nintendo"
  const deviceName = filePath.split('/')[1];
  // 将配置存入对象，后续可通过 deviceConfigs.nintendo 访问
  deviceConfigs[deviceName] = configContext(filePath);
});

// 示例：检测到设备后获取配置
const targetDevice = detectDevice(navigator.userAgent); // 你的设备检测函数
if (deviceConfigs[targetDevice]) {
  renderDeviceInfo(deviceConfigs[targetDevice]); // 你的信息展示函数
}

require.context会在构建时自动遍历匹配的文件，最终把所有配置打包到bundle里，运行时直接通过对象属性访问即可。

方案二：运行时按需加载配置（更优） #

如果设备数量较多，打包所有配置会增大初始bundle体积，拖慢页面加载速度。这种情况下，推荐检测到设备后再动态加载对应配置，只加载需要的资源：

// 设备检测函数（你的现有逻辑）
function detectDevice(userAgent) {
  // 示例逻辑，根据UA返回设备标识，比如 'nintendo'/'xbox'/'ps5'
  if (userAgent.includes('Nintendo')) return 'nintendo';
  if (userAgent.includes('Xbox')) return 'xbox';
  if (userAgent.includes('PlayStation 5')) return 'ps5';
  return null;
}

// 动态加载对应设备的配置
async function loadDeviceConfig(deviceId) {
  try {
    // Webpack会自动拆分每个配置为单独的chunk，运行时按需加载
    const configModule = await import(`./devices/${deviceId}/config.json`);
    return configModule.default;
  } catch (err) {
    console.error(`未找到${deviceId}的配置文件`);
    return null;
  }
}

// 页面初始化时执行
async function init() {
  const device = detectDevice(navigator.userAgent);
  if (!device) return;
  
  const config = await loadDeviceConfig(device);
  if (config) {
    renderDeviceInfo(config); // 你的信息展示函数
  }
}

init();

这种方案的优势：

• 初始bundle体积更小，页面加载更快
• 新增设备时，只需在devices目录下添加对应文件夹和config.json，无需修改现有代码
• 避免打包未使用的配置资源

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