使用Webpack将资产上传到S3

Question

当前，我的react项目中的所有图像都由nginx服务器提供。这些图像与源捆绑在一起。源不使用require / import，而是使用url路径来渲染图像。

现在，我想使用S3作为存储从Cloudfront提供这些图像。 我计划为每个环境在S3上创建一组资产。

我可以想到两种方法：

方法1.使用脚本

• 创建在webpack捆绑后运行的脚本
• 该脚本会将文件上传到S3
• 脚本和源代码中的路径将根据环境变量推导

方法2.创建Webpack加载器

• 更新源以导入/获取图像
• 创建一个将图像上传到S3并返回公共路径的加载器

对这些方法有何意见或对更好方法的建议？

Answer 1

我最终创建了一个webpack插件，将我的静态资产上传到S3。

我使用了一个build参数来推导源中的静态资产的基本路径和相同的参数来推导插件中的上载路径。