{"id":20546,"library":"serviceworker-webpack-plugin","title":"serviceworker-webpack-plugin","description":"A webpack plugin (v1.0.2, latest) that simplifies creating a service worker to cache all webpack bundle assets. It automatically resolves asset names (including hashed names for long-term caching) and provides them to a custom service worker script via a global `serviceWorkerOption` variable. Supports webpack 4 only (peer dependency). Key differentiator: it handles non-deterministic asset names and integrates with webpack's dev server. Alternatives like `workbox-webpack-plugin` are more full-featured but heavier; this plugin is minimal and focused.","status":"active","version":"1.0.2","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/oliviertassinari/serviceworker-webpack-plugin","tags":["javascript","serviceworker","webpack","plugin"],"install":[{"cmd":"npm install serviceworker-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add serviceworker-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add serviceworker-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; plugin designed specifically for webpack 4.x","package":"webpack","optional":false}],"imports":[{"note":"Default export is the constructor. In CommonJS, use require('serviceworker-webpack-plugin').default; plain require('serviceworker-webpack-plugin') returns the module object.","wrong":"const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin').default;","symbol":"ServiceWorkerWebpackPlugin","correct":"import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';"},{"note":"The runtime module is a separate file in the lib folder, not part of the main export. Must import with relative path.","wrong":"import { runtime } from 'serviceworker-webpack-plugin';","symbol":"runtime","correct":"import runtime from 'serviceworker-webpack-plugin/lib/runtime';"},{"note":"This is a global variable injected into the service worker file by the plugin. It is not importable.","wrong":"import { serviceWorkerOption } from 'serviceworker-webpack-plugin';","symbol":"serviceWorkerOption","correct":"// Global variable injected into the service worker script at build time"}],"quickstart":{"code":"// webpack.config.js\nimport path from 'path';\nimport ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';\n\nexport default {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.[chunkhash].js',\n    publicPath: '/',\n  },\n  plugins: [\n    new ServiceWorkerWebpackPlugin({\n      entry: path.join(__dirname, 'src/sw.js'),\n    }),\n  ],\n};\n\n// src/sw.js\nself.addEventListener('install', function(event) {\n  event.waitUntil(\n    caches.open('my-cache').then(function(cache) {\n      return cache.addAll(serviceWorkerOption.assets);\n    })\n  );\n});\n\nself.addEventListener('fetch', function(event) {\n  event.respondWith(\n    caches.match(event.request).then(function(response) {\n      return response || fetch(event.request);\n    })\n  );\n});\n\n// src/index.js\nimport runtime from 'serviceworker-webpack-plugin/lib/runtime';\n\nif ('serviceWorker' in navigator) {\n  runtime.register();\n}","lang":"javascript","description":"Demonstrates setup: plugin in webpack config, custom service worker that caches all assets, and runtime registration in main bundle."},"warnings":[{"fix":"Upgrade to webpack 4 or stay on v0.2.3 for webpack 3","message":"v1.0.0 dropped webpack 3 support; requires webpack ^4","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Set publicPath explicitly to '' if using a relative path, or upgrade to latest","message":"v0.2.0 changed default publicPath from '' to '/'; can cause double slashes in asset paths","severity":"deprecated","affected_versions":">=0.2.0 <0.3.0"},{"fix":"Use `import runtime from 'serviceworker-webpack-plugin/lib/runtime'`","message":"Runtime import must be from serviceworker-webpack-plugin/lib/runtime, not the main package","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin').default`","message":"The default export in CommonJS requires `.default` access","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider using workbox-webpack-plugin for webpack 5 projects","message":"Plugin does not support webpack 5; unmaintained for newer webpack versions","severity":"gotcha","affected_versions":">=1.0.2"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use `const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin').default`","cause":"CommonJS require returns the module object, not the constructor directly","error":"TypeError: ServiceWorkerWebpackPlugin is not a constructor"},{"fix":"Ensure correct import: `import runtime from 'serviceworker-webpack-plugin/lib/runtime'`","cause":"Incorrect import path or missing dependency","error":"Module not found: Can't resolve 'serviceworker-webpack-plugin/lib/runtime'"},{"fix":"Reference `serviceWorkerOption` only in the file specified as `entry` in the plugin options","cause":"The global variable is only available inside the service worker file processed by the plugin","error":"Error: serviceWorkerOption is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}