Add a service worker to Webpack in react

Question

If you're using Create React App, Next.js, Gatsby, or a similar tool, you will have a Webpack setup out of the box to bundle your app.

So by default we have Webpack in React application, I want to add firebase-messaging-sw.js to my webpack configuration to migrate to modular Web SDK of firebase

How can I add firebase-messaging-sw.js to webpack of react that let me use import and tree-shaking

Answer 1

According to the docs you just need to run

npm i firebase@9.1.1 --save

and you're done. (added --save so the change is added to your package.json)

Webpack is just a module bundler that will find the installed package and use it when you import it. Tree shaking will be done automatically by Webpack. So you don't have to modify the existing webpack.config.js (which would require you to eject the config first of all).