Using firebase hosting with webpack javascript

Question

I would like to use firebase hosting with webpack but I am quite confused on how to set it up. I want to use my firebase hosting emulator, using firebase serve but I would also like to use webpack. Is there any way that I can use firebase serve and build the js bundle with webpack as well automatically?

Thank you very much in advance.

Answer 1

If you run webpack --watch --mode=development , webpack will re-run any time it detects a change to the files in the config.

You can also add a predeploy scripted task to have it re-run when you deploy, like so (in this case my hosting folder name is hosting/ ):

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

But I think your dev setup will involve opening two terminal windows: one to run webpack --watch and another to run firebase serve .

Answer 2

What I do is tell webpack to create all of the content in the Firebase Hosting public folder.

First, define the folder that you want it to use. You will have to change this to point to your own Firebase Hosting public folder:

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

Then use dist in the output configuration with the path property:

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

All the output should go to that folder, and you use the Firebase CLI to serve locally and deploy.