使用Webpack构建React项目：img标签相对路径图片未打包问题求助

我明白你的困扰——不想写require()，只想用直观的相对路径引入图片，但Webpack就是不买账。别担心，咱们一步步解决：

一、Webpack 5 解决方案（推荐） #

Webpack 5自带了Asset Modules，替代了之前的file-loader/url-loader，同时配合一个Babel插件就能自动处理JSX里的img相对路径。

1. 配置Webpack的资源模块 #

在你的webpack.config.js里，添加module.rules规则来处理图片文件：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...你的babel-loader、css-loader等规则
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
        generator: {
          // 打包后图片输出的目录和文件名格式
          filename: 'assets/images/[name].[hash:8][ext]'
        }
      }
    ]
  },
  output: {
    // ...其他output配置
    publicPath: '/' // 如果你的项目部署在根目录，这个配置确保路径正确
  }
};

asset/resource会把图片文件复制到输出目录，并返回打包后的资源URL，完美替代file-loader。

2. 用Babel插件自动转换JSX的img路径 #

因为React的JSX里，src="./xxx.png"只是字符串，Webpack不会自动解析。我们用babel-plugin-transform-react-jsx-img-import插件，自动把这个字符串转换成Webpack能识别的模块引入：

首先安装插件：

npm install babel-plugin-transform-react-jsx-img-import --save-dev

然后在你的.babelrc或者babel.config.js里添加这个插件：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"],
  "plugins": ["transform-react-jsx-img-import"]
}

这个插件会自动把JSX中的：

<img src="./assets/logo.png" alt="logo" />

转换成：

import logo from "./assets/logo.png";
<img src={logo} alt="logo" />

这样Webpack就能正常打包图片，而你完全不用手动写import或者require()！

二、Webpack 4 解决方案（兼容旧版本） #

如果还在使用Webpack 4，需要用file-loader配合同样的Babel插件：

1. 安装file-loader #

npm install file-loader --save-dev

2. 配置Webpack规则 #

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他规则
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/images/[name].[hash:8].[ext]',
              publicPath: '/'
            }
          }
        ]
      }
    ]
  }
};

3. 同样添加Babel插件 #

和Webpack5的步骤2一样，安装并配置babel-plugin-transform-react-jsx-img-import，自动转换JSX中的img路径。

三、注意事项 #

• 确保你的图片路径是相对于当前组件文件的，比如组件在src/components/Header.jsx，图片在src/assets/logo.png，那路径应该是../assets/logo.png。
• 如果你的项目部署在子目录（比如https://example.com/my-app/），记得把output.publicPath改成'/my-app/'，避免路径错误。
• 如果你用的是Create React App（CRA），其实它已经内置了类似的处理，但如果你 eject 了或者自定义了Webpack配置，上面的方法同样适用。

这样配置后，你就能像写HTML一样用相对路径引入图片，Webpack会自动帮你打包处理，完全不用手动写require()啦！

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