{"id":20545,"library":"service-worker-webpack","title":"service-worker-webpack","description":"A minimal Webpack plugin wrapper around Workbox (v6+) to generate a service worker that precaches static assets. Current stable version is 1.0.0, which follows semantic versioning. Works with Webpack 4 and 5, and ships TypeScript type definitions. Key differentiators: zero-config setup (just add the plugin), optional logging controls, and development mode support with proper cleanup of stale service workers.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/tatethurston/service-worker-webpack","tags":["javascript","offline","plugin","pwa","service worker","webpack","workbox","typescript"],"install":[{"cmd":"npm install service-worker-webpack","lang":"bash","label":"npm"},{"cmd":"yarn add service-worker-webpack","lang":"bash","label":"yarn"},{"cmd":"pnpm add service-worker-webpack","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package does not export ESM; only CJS require() works. For projects using ESM, use dynamic import or transpile.","wrong":"import { ServiceWorkerPlugin } from 'service-worker-webpack';","symbol":"ServiceWorkerPlugin","correct":"const { ServiceWorkerPlugin } = require('service-worker-webpack');"},{"note":"No default export exists; must use named export via require.","wrong":"import ServiceWorkerPlugin from 'service-worker-webpack';","symbol":"ServiceWorkerPlugin (default import)","correct":"const ServiceWorkerPlugin = require('service-worker-webpack').ServiceWorkerPlugin;"},{"note":"TypeScript types are bundled but only accessible via the same require; no separate type export path.","wrong":"import type { ServiceWorkerPluginOptions } from 'service-worker-webpack';","symbol":"type ServiceWorkerPluginOptions","correct":"const { ServiceWorkerPlugin } = require('service-worker-webpack');"}],"quickstart":{"code":"const path = require('path');\nconst { ServiceWorkerPlugin } = require('service-worker-webpack');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    filename: 'main.js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  plugins: [\n    new ServiceWorkerPlugin({\n      enableInDevelopment: false,\n      enableWorkboxLogging: false,\n    }),\n  ],\n};","lang":"javascript","description":"Adds a service worker that precaches all output static assets using Workbox, with minimal configuration."},"warnings":[{"fix":"Set enableInDevelopment: true in the plugin options during debugging, or accept that caching is disabled in development.","message":"When enableInDevelopment is false (default), the generated service worker in dev mode is a no-op that immediately unregisters any existing service worker. This can surprise developers who expect caching to work in development.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Explicitly set enableWorkboxLogging: false to suppress all workbox logs regardless of mode.","message":"Workbox logging is verbose. By default, it logs in non-production mode; setting enableWorkboxLogging: false may still show logs if webpack mode is not 'production'.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Switch to workbox-webpack-plugin if custom swSrc is required.","message":"The plugin does not support custom service worker scripts via swSrc (unlike workbox-webpack-plugin). Users needing custom SW logic must use workbox-webpack-plugin directly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade webpack to ^4.37.0 || ^5.9.0.","message":"Version 1.0.0 requires Webpack 4.37+ or 5.9+. Older Webpack versions (e.g., 4.36) are not supported.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev service-worker-webpack","cause":"Package not installed or installed incorrectly (not in devDependencies).","error":"Cannot find module 'service-worker-webpack'"},{"fix":"Change import to: const { ServiceWorkerPlugin } = require('service-worker-webpack');","cause":"Incorrect import: using ES import syntax on a CJS-only module.","error":"ServiceWorkerPlugin is not a constructor"},{"fix":"Use webpack's optimize.splitChunks configuration instead.","cause":"This package does not export SplitChunksPlugin; user may have confused it with webpack's built-in plugin.","error":"TypeError: webpack.optimize.SplitChunksPlugin is not a constructor"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}