webpack配置后无法通过URL访问public文件夹图片如何解决？

开发环境配置 #

修改webpack开发配置中的devServer字段，将public文件夹注册为静态资源服务目录，开发服务启动后会自动将public下的文件映射到服务根路径：

const path = require('path');

module.exports = {
  // 其余原有配置保持不变
  devServer: {
    // 其余devServer原有配置保持不变
    // webpack 5 配置
    static: [
      {
        directory: path.resolve(__dirname, '../public'), // 此处路径调整为你项目中public文件夹相对于当前配置文件的实际路径
        publicPath: '/'
      }
    ]
    // 若使用webpack 4，替换上方static配置为下面这行即可
    // contentBase: path.resolve(__dirname, '../public')
  }
}

生产环境配置 #

生产环境需要借助copy-webpack-plugin插件，将public下的静态资源直接复制到打包输出目录，保证路径对应：

1. 安装依赖

npm install copy-webpack-plugin --save-dev
# 若使用yarn
yarn add copy-webpack-plugin -D

2. 修改webpack生产配置，新增插件配置：

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 其余原有配置保持不变
  plugins: [
    // 其余原有插件保持不变
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, '../public/images'),
          to: 'images',
          noErrorOnMissing: true
        }
        // 若public下还有其他需要直接通过url引用的静态资源，可新增规则复制整个public目录：
        // {
        //   from: path.resolve(__dirname, '../public'),
        //   to: './',
        //   globOptions: {
        //     ignore: ['**/index.html'] // 排除html模板，避免和html-webpack-plugin冲突
        //   }
        // }
      ]
    })
  ]
}

可选优化与注意事项 #

• 若项目部署在域名子路径下，可通过process.env.PUBLIC_URL拼接资源路径：<img src={${process.env.PUBLIC_URL}/images/logo.png} alt="logo" />，打包时通过DefinePlugin注入对应环境的公共路径即可。
• 如果后续需要图片压缩、格式自动转WebP、按需适配分辨率等优化，建议走import引入的方式配合webpack内置的Asset Module处理，自动化能力更强。
• 引用路径请保持开头带/，避免受前端路由层级影响导致路径查找错误。

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