在 webpack javascript 中使用 Firebase 托管

Question

我想在 webpack 中使用 firebase 托管，但我對如何設置它感到很困惑。 我想使用我的 firebase 托管模擬器，使用firebase serve但我也想使用 webpack。 有什么辦法，我可以使用firebase serve ，並建立了JS用的WebPack捆綁以及自動？

非常感謝您提前。

Answer 1

如果您運行webpack --watch --mode=development ，webpack 將在檢測到配置文件發生更改時重新運行。

您還可以添加一個預部署腳本任務，以便在部署時重新運行它，如下所示（在這種情況下，我的托管文件夾名稱是hosting/ ）：

    "predeploy" : [
      "webpack --mode=production --context=hosting/"
    ]

但我認為您的開發設置將涉及打開兩個終端窗口：一個運行webpack --watch ，另一個運行webpack --watch firebase serve 。

Answer 2

我所做的是告訴 webpack 在 Firebase Hosting 公共文件夾中創建所有內容。

首先，定義您希望它使用的文件夾。 您必須將其更改為指向您自己的 Firebase Hosting 公共文件夾：

// Publish to Firebase Hosting space
const dist = path.join(__dirname, '../hosting/public')

然后在帶有path屬性的輸出配置中使用dist ：

  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[id].chunk.js',
    // chunkFilename: '[id].bundle_[chunkhash].js',
    path: dist
  }

所有輸出都應轉到該文件夾​​，然后您使用 Firebase CLI 在本地提供服務並進行部署。