AWS Amplify部署React+Webpack项目后图片无法加载问题求助

1. webpack配置错误 #

1.1 运行目标配置异常 #

当前配置中target: 'node'是面向Node.js环境打包的参数，面向浏览器运行的React前端项目需要删除该配置项，或显式设置为target: 'web'，该参数错误会导致静态资源引用逻辑异常。

1.2 file-loader缺少输出规则 #

当前file-loader仅声明了loader引用，没有指定生产环境的资源输出目录和引用路径，打包后资源路径会和本地开发环境不一致，修改配置如下：

{
    test: /\.(jpg|jpeg|png|gif|woff|woff2|eot|ttf|svg|mp3)$/i,
    use: [
        {
            loader: "file-loader",
            options: {
                outputPath: 'assets/', // 打包后资源统一输出到build/assets目录
                publicPath: '/assets/', // 代码引用资源时自动添加/assets前缀
                name: '[name].[contenthash].[ext]'
            }
        }
    ]
}

2. Amplify重写规则匹配问题 #

当前重写规则的正则没有忽略大小写，如果存在图片后缀为大写的.PNG/.JPG，会被规则匹配返回HTML内容而非图片资源，修改规则添加忽略大小写标记即可：

[
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|jpeg|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/i>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]

3. 验证步骤 #

• 本地执行生产打包命令后，检查build目录下是否存在对应图片资源，确认打包环节没有丢失资源
• 部署后在浏览器网络面板查看未加载图片的实际请求地址，确认路径是否符合预期

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