在 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 在本地提供服务并进行部署。