Webpack 5与React应用中图片资源加载策略详解

const HtmlWebpackPlugin = require('html-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

const webpackConfig = () => ({
    entry: './src/index.tsx',
    resolve: {
        extensions: ['.ts', '.tsx', '.js'],
        plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })],
    },
    module: {
        rules: [
            // 处理图片文件：使用 asset/resource 类型
            {
                test: /\.(png|jpe?g|gif|svg|webp)$/i, // 扩展更多图片格式
                type: 'asset/resource', // Webpack 5 内置的资产模块
                generator: {
                    // 定义输出文件名和路径，例如：images/my-image.hash.png
                    filename: 'images/[name].[hash][ext]',
                    // publicPath 默认为 output.publicPath，通常无需单独配置
                },
            },
            {
                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';`,
                        },
                    },
                ],
            }
        ],
    },
    devServer: {
        port: 9100,
        open: true,
        historyApiFallback: true,
        // Webpack 5 中，静态文件服务配置在 devServer.static
        static: {
            directory: './public', // 指向你的公共文件夹
            publicPath: '/', // 访问公共文件夹内容的路径
        },
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
        }),
    ],
    output: {
        // 配置输出目录和公共路径
        path: require('path').resolve(__dirname, 'build'),
        publicPath: '/', // 确保资源的公共路径正确，通常是 '/'
        clean: true, // Webpack 5 自动清理 output 目录
    }
});

module.exports = webpackConfig;

import React from 'react';
// 导入图片文件，Webpack 会处理这个路径并返回最终的公共 URL
import arsenalLogo from '../../logos/epl/teams/arsenal.png'; 

const MyComponent: React.FC = () => {
  return (
    <div>
      {/* 直接将导入的图片变量赋值给 src 属性 */}
      <img src={arsenalLogo} alt="Arsenal Logo" />

      {/* 也可以动态地使用图片 */}
      {/* <img src={require('../../logos/epl/teams/chelsea.png').default} alt="Chelsea Logo" /> */}
      {/* 注意：require 语法在 TypeScript 中可能需要额外配置或使用 .default */}
    </div>
  );
};

export default MyComponent;

/* src/styles/variables.scss (如果通过 additionalData 引入) */
$image-path: '../assets/images'; // 示例路径，根据你的实际结构调整

/* src/styles/my-component.scss */
.my-background-element {
  background-image: url('../../logos/epl/teams/man-utd.png'); // 相对路径引用
  background-size: cover;
  height: 200px;
  width: 300px;
}

// 也可以使用变量，但路径仍需正确
.another-element {
  background-image: url(#{$image-path}/some-other-image.png); // 示例，路径需要正确
}

<!-- public/index.html 或通过 HtmlWebpackPlugin 渲染的模板 -->
<img src="/images/arsenal.png" alt="Arsenal Logo" />

import React from 'react';

const MyComponent: React.FC = () => {
  return (
    <div>
      {/* 注意：这里的路径是相对于服务器根目录的绝对路径 */}
      <img src="/images/arsenal.png" alt="Arsenal Logo" />
    </div>
  );
};

export default MyComponent;