使用 webpack 上傳資源到 S3

Question

目前，我的 React 項目中的所有圖像都由 nginx 服務器提供服務。 這些圖像是帶有源的捆綁包。 源不使用 require/import，而是使用 url 路徑來呈現圖像。

現在我想從 cloudfront 提供這些圖像，使用 S3 作為我的存儲。 我計划在 S3 上為每個環境創建一組資產。

我可以想到兩種方法來做到這一點：

方法 1. 使用腳本

• 創建一個在 webpack 打包后運行的腳本
• 該腳本會將文件上傳到 S3
• 腳本和源中的路徑將根據環境變量推導出

方法 2. 創建一個 webpack loader

• 更新源以導入/需要圖像
• 創建一個加載器將圖像上傳到 S3 並返回公共路徑

關於這些方法的任何意見或關於更好方法的建議？

Answer 1

我最終創建了一個 webpack 插件，將我的靜態資產上傳到 S3。

我使用構建參數來推斷源中靜態資產的基本路徑，並使用相同的參數來推斷插件中的上傳路徑。