React+Webpack环境下修改OpenWeatherMap数字开头图标问题

嘿，这个问题我之前做天气类项目的时候也碰到过，刚好可以给你几个可行的解决思路～

首先得说一下你尝试的第三个方案为什么行不通：Webpack在编译阶段只能识别静态的资源导入路径，你通过setState拼接的动态路径，Webpack没办法提前知道要打包哪些图标，所以最终页面加载时会找不到这些资源，出现404错误。下面给你两个靠谱的解决方法：

方法一：手动创建图标映射对象 #

既然JavaScript不允许变量名以数字开头，我们可以把图标用字符串作为键存到一个对象里，这样就能避开这个限制了：

方式1：用require导入（适合CommonJS风格） #

// 在组件文件里创建图标映射
const weatherIcons = {
  '01d': require('./WeatherIcons/01d.svg').default,
  '01n': require('./WeatherIcons/01n.svg').default,
  '10d': require('./WeatherIcons/10d.svg').default,
  // 把你用到的所有图标都加进来
};

// 在组件渲染时使用
render() {
  return (
    <img 
      src={weatherIcons[this.state.currentIcon]} 
      alt="天气图标" 
    />
  );
}

方式2：用ES模块重命名导入 #

如果你习惯用ES6的import，可以给每个图标重命名，避开数字开头：

// 重命名导入，比如把01d改成icon01d
import icon01d from './WeatherIcons/01d.svg';
import icon10d from './WeatherIcons/10d.svg';

// 同样存入对象
const weatherIcons = {
  '01d': icon01d,
  '10d': icon10d
};

// 渲染时使用和上面一样

方法二：用Webpack的require.context批量导入（推荐！） #

如果你的图标数量很多，手动一个个导入太麻烦，Webpack提供了require.context可以批量加载目录下的所有匹配文件，自动生成映射：

// 创建一个上下文，加载WeatherIcons目录下所有.svg文件
const iconContext = require.context('./WeatherIcons', false, /\.svg$/);

// 自动构建图标映射对象
const weatherIcons = {};
iconContext.keys().forEach(key => {
  // 从文件路径中提取图标名称，比如从'./10d.svg'拿到'10d'
  const iconName = key.replace('./', '').replace('.svg', '');
  weatherIcons[iconName] = iconContext(key).default;
});

// 组件里直接用
render() {
  return (
    <img 
      src={weatherIcons[this.state.currentIcon]} 
      alt="天气图标" 
    />
  );
}

这个方法的好处是，以后你新增图标文件到WeatherIcons目录里，不需要手动修改代码，映射会自动更新，非常省心。

这两种方法都能让Webpack正确识别并打包你的图标资源，同时避开JavaScript变量名的限制，你可以根据自己的图标数量多少选择合适的方式～

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