如何在Webpack构建时打包外部URL中的JSON文件

刚好做过类似的需求！要实现Webpack构建时自动抓取远程JSON并打包进应用，而不是客户端每次加载都去请求慢的URL，这里有两个靠谱的方案，你可以根据自己的场景选：

方案1：构建前执行脚本拉取JSON（无需修改原有导入代码） #

这个方案的思路是：在Webpack开始构建前，先通过脚本把远程JSON下载到本地原来的路径，这样你原来的import语句完全不用改，Webpack打包时直接用最新的本地文件。

步骤： #

1. 安装辅助插件（用来在构建前后执行脚本）：

npm install webpack-shell-plugin-next --save-dev

2. 写一个Node脚本用来拉取JSON（比如命名为fetch-teams.js）：

const fs = require('fs');
const fetch = require('node-fetch');

async function fetchLatestTeams() {
  try {
    // 拉取远程JSON
    const res = await fetch('https://example.com/teams.json');
    const teamsData = await res.json();
    
    // 写入本地原来的JSON文件路径
    fs.writeFileSync('./sample_info/teams.json', JSON.stringify(teamsData, null, 2));
    console.log('✅ 成功拉取最新的teams.json');
  } catch (err) {
    console.error('❌ 拉取远程JSON失败:', err.message);
    // 可选：如果拉取失败，使用本地旧文件避免构建中断
    console.log('💡 降级使用本地缓存的teams.json');
  }
}

fetchLatestTeams();

注意：如果你的项目里没有node-fetch，需要先安装它：npm install node-fetch --save-dev

3. 在Webpack配置文件中配置插件，让它在构建开始前执行这个脚本：

const WebpackShellPluginNext = require('webpack-shell-plugin-next');

module.exports = {
  // ...你的其他Webpack配置
  plugins: [
    new WebpackShellPluginNext({
      onBuildStart: ['node fetch-teams.js'],
      safe: true // 即使脚本执行失败，也继续构建（可选，根据你的容错需求调整）
    })
  ]
};

这样每次你运行npm run build时，Webpack都会先触发脚本拉取最新的JSON到本地，然后正常打包——你的原有导入代码import TEAM_LIST from '../sample_info/teams';完全不需要修改。

方案2：自定义Webpack Loader直接导入远程JSON #

如果你想更“原生”地从远程URL导入，可以写一个简单的Webpack Loader，让Webpack在构建时直接拉取远程数据并打包进bundle。

步骤： #

1. 写一个自定义Loader（比如命名为remote-json-loader.js）：

const fetch = require('node-fetch');
const fs = require('fs');

// Webpack Loader的核心逻辑
module.exports = async function() {
  try {
    const res = await fetch('https://example.com/teams.json');
    const teamsData = await res.json();
    // 将JSON数据转为JS模块导出
    return `export default ${JSON.stringify(teamsData)};`;
  } catch (err) {
    console.error('❌ 拉取远程JSON失败:', err.message);
    // 可选：返回本地备份数据
    const fallbackData = fs.readFileSync('./sample_info/teams.json', 'utf8');
    return `export default ${fallbackData};`;
  }
};

2. 在Webpack配置中注册这个Loader：

module.exports = {
  // ...你的其他Webpack配置
  module: {
    rules: [
      {
        test: /remote-teams\.json$/, // 匹配自定义的虚拟文件名
        use: ['./remote-json-loader.js']
      }
    ]
  }
};

3. 修改你的导入语句，使用这个虚拟的文件名：

import TEAM_LIST from './remote-teams.json';

这样Webpack在构建时，会通过这个Loader拉取远程JSON，直接把数据打包进你的应用bundle里，客户端运行时完全不需要再发请求。

一些注意事项 #

• 网络权限：确保你的构建环境（比如本地开发机、CI/CD服务器）能访问到目标URL
• 缓存优化：可以给脚本/Loader加缓存逻辑（比如对比远程文件的ETag或哈希），避免每次构建都重复拉取相同的内容
• 错误处理：建议保留本地备份文件，避免远程请求失败导致构建中断或应用报错

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