Webpack 5 与 React 应用中的图片加载策略：告别路径困扰

const webpackConfig = () => ({
    // ...其他配置...
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg|webp)$/i, // 匹配常见的图片格式
                type: 'asset/resource', // 使用 asset/resource 类型
                generator: {
                    // 定义输出文件名和路径，这里将图片输出到 'images/' 目录下
                    // [name].[ext] 保留原始文件名和扩展名
                    // [hash] 可以添加哈希值，防止缓存问题
                    filename: 'images/[name][ext]',
                },
            },
            // ...其他规则，如ts-loader, sass-loader...
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {
                    transpileOnly: true,
                },
                exclude: /build/,
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            additionalData: `@import 'src/styles/variables';`,
                        },
                    },
                ],
            }
        ],
    },
    // ...其他配置...
});

import React from 'react';
// 假设你的图片位于 src/assets/logos/epl/teams/arsenal.png
import arsenalLogo from './assets/logos/epl/teams/arsenal.png'; 

const TeamLogo = () => {
  return (
    <div>
      <h1>Arsenal FC</h1>
      {/* <img src={arsenalLogo} /> 会被 Webpack 替换为正确的公共路径，例如 /images/arsenal.png */}
      <img src={arsenalLogo} alt="Arsenal Logo" style={{ width: '100px' }} />
    </div>
  );
};

export default TeamLogo;

/* src/styles/team-logo.scss */
.team-logo {
  width: 100px;
  height: 100px;
  // 路径相对于当前 SCSS 文件
  background-image: url('../assets/logos/epl/teams/arsenal.png'); 
  background-size: contain;
  background-repeat: no-repeat;
}

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path'); // 引入 path 模块

const webpackConfig =