Bundle firebase-messaging-sw.js deps with Webpack

Question

Say I have a file in which I initialize Firebase and import its dependencies.

app.js

import firebase from 'firebase'

firebase.initializeApp()

Now I want to reference the same dependencies for firebase-messaging-sw.js as well but since it needs to be in the root, how can I tell Webpack to solve the dependencies?

Sure enough I could go with

importScripts('https://www.gstatic.com/firebasejs/4.1.3/firebase.js')

But that would download me the code twice.

Answer 1

This plugin solved my problem. firebase-messaging-sw.js will be copied to root folder after building production

let config = {
  plugins: [
   ...,
    new CopyPlugin([
      {
        from: 'firebase-messaging-sw.js',
        to: 'firebase-messaging-sw.js'
      }
    ])
  ]
}

If you have more than 1 service worker file with different environments. It can be like this

let config = {
  plugins: [
   ...,
    new CopyPlugin([
      {
        from: isProduction ? 'firebase-messaging-sw-prod.js' : 'firebase-messaging-sw.js',
        to: 'firebase-messaging-sw.js'
      }
    ])
  ]
}