使用带有 webpack javascript 的 firebase 托管答案

【问题标题】：Using firebase hosting with webpack javascript使用带有 webpack javascript 的 firebase 托管
【发布时间】：2019-09-15 08:34:36
【问题描述】：

我想通过 webpack 使用 firebase 托管，但我对如何设置它感到很困惑。我想使用我的 firebase 托管模拟器，使用 firebase serve，但我也想使用 webpack。有什么方法可以使用firebase serve 并自动使用 webpack 构建 js 包？

非常感谢您。

【问题讨论】：

标签： javascript firebase webpack webpack-dev-server firebase-hosting

【解决方案1】：

如果你运行webpack --watch --mode=development，webpack 将在任何时候检测到配置中的文件发生更改时重新运行。

您还可以添加 predeploy scripted task 以在部署时重新运行它，就像这样（在这种情况下，我的托管文件夹名称是 hosting/）：

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

但我认为您的开发设置将涉及打开两个终端窗口：一个运行webpack --watch，另一个运行firebase serve。

【讨论】：

【解决方案2】：

我所做的是告诉 webpack 在 Firebase Hosting 公共文件夹中创建所有内容。

首先，定义您希望它使用的文件夹。您必须将其更改为指向您自己的 Firebase 托管公共文件夹：

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

【讨论】：

感谢您的回答！每次我进行更改时，我是否需要使用 weboack 构建我的 js？或者有其他方法吗？