How to use injectManifest in Workbox with Parcel-bundler?

I am building a service worker for my PWA with Workbox.


import { registerRoute } from 'workbox-routing';
import { NetworkFirst } from 'workbox-strategies';
import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';
import * as googleAnalytics from 'workbox-google-analytics';
import { precacheAndRoute } from 'workbox-precaching';


    ({ request }) => request.destination === 'script',
    new NetworkFirst()

    // Cache style resources, i.e. CSS files.
    ({ request }) => request.destination === 'style',
    // Use cache but update in the background.
    new StaleWhileRevalidate({
        // Use a custom cache name.
        cacheName: 'css-cache',

    // Cache image files.
    ({ request }) => request.destination === 'image',
    // Use the cache if it's available.
    new CacheFirst({
        // Use a custom cache name.
        cacheName: 'image-cache',
        plugins: [
            new ExpirationPlugin({
                // Cache for a maximum of a week.
                maxAgeSeconds: 7 * 24 * 60 * 60,


if (process.env.NODE_ENV !== 'production') {
    console.log('This is a dev-only log message!');

Is there a way that Parcel injects only the latest version of files in the service worker after each build?

My Attempts

  1. I tried using workbox-build in a node script but each time I ran npm run build , it added all the versions of the file present in the dist/ folder.

service-worker.js (when I used a Node script)

// code skipped for brevity

They are different versions of the same file but I want only the latest version

  1. I tried using parcel-plugin-sw-cache but couldn’t figure out how to use it due to insufficient documentation.