Read env variable from service worker file using w

Question

I'm working with workbox-sw and workbox-webpack-plugin My src sw.js file at root folder (same level with my .env file)

How can I get env variables and accessing it into my src sw.js file

This is from my webpack.config.js

new workboxPlugin({
    globDirectory: 'dist',
    globPatterns: ['**/*.{html,js,css,svg,otf,png,jpg,gif}'],
    swSrc: './sw.js',
    swDest: path.join('public', 'sw.js')
})

Every help will be appreciated! Thanks everyone!

Answer 1

Because you're using swSrc: './sw.js', that implies that the ./sw.js file will be the basis for the final service worker file that's output. (It will have the precache information inserted into it as part of the build process.)

This means that you can process ./sw.js however you'd like before the workbox-webpack-plugin runs, including modifying it by replacing placeholders with environment variables. I believe that webpack.DefinePlugin is normally used for that?