reactjs - Webpack s3 插件未更新要从 S3 加载的图像

Question

我对 Webpack S3 插件有疑问。我有一个非常基本的配置：

new S3Plugin({
    s3Options: {
        accessKeyId: process.env.AWS_ACCESS_KEY_ID,
        secretAccessKey: process.env.AWS_ACCESS_KEY_SECRET,
        region: process.env.AWS_REGION
    },
    s3UploadOptions: {
        Bucket: process.env.AWS_S3_BUCKET
    }
})

当我使用 webpack 构建代码时，捆绑的 JS 文件、CSS 文件和所有字体都正确上传到 S3 存储桶。URL 相对于目录显示，因此它适用于 S3。但是，使用 file-loader 加载的 SVG 文件也会将 URL 转换为相对的。因为我的网站是从另一个域加载的，所以我无法打开图像。此外，图像文件也不会上传到 S3。该文件是这样加载的：

import logo from 'img/logo.svg';

有没有办法让 S3 插件将文件转换为 S3 URL 而不是相对的？另外，有没有办法让 S3 上传使用加载的文件import？

Answer 1

我的 webpack 配置中缺少 publicPath。我只是这样添加它：

output: {
    ...,
    publicPath: 'https://' + bucketName + '.s3.amazonaws.com/'
}

最后的正斜杠很重要，因为 webpack 只是将导入的文件名附加到 publicPath。