{"id":20844,"library":"webpack-target-webextension","title":"Webpack Target WebExtension","description":"A Webpack 5 plugin (also works with Rspack) that provides presets and fixes for building Web Extensions (Chrome, Firefox). It enables code splitting via dynamic import() and classic loaders, Hot Module Reload, and correct public path handling. Current stable version is 2.1.3, released under the MIT license. Key differentiators: supports Manifest V2 and V3, works with both webpack and rspack, and includes built-in chunk loaders for content scripts and background scripts. Note: webpack 4 users must use version 0.2.1.","status":"active","version":"2.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/crimx/webpack-target-webextension","tags":["javascript","webpack","webextension","extension","target","dynamic-import","code-splitting","chrome","firefox"],"install":[{"cmd":"npm install webpack-target-webextension","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-target-webextension","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-target-webextension","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin requires webpack ^5.0.0 (or Rspack).","package":"webpack","optional":false}],"imports":[{"note":"Default export; CommonJS require with .default is a common mistake.","wrong":"const WebExtension = require('webpack-target-webextension').default;","symbol":"WebExtension","correct":"import WebExtension from 'webpack-target-webextension'"},{"note":"CJS require gets the default export directly, not a named export.","wrong":"const { WebExtension } = require('webpack-target-webextension')","symbol":"WebExtension (CJS)","correct":"const WebExtension = require('webpack-target-webextension')"},{"note":"This package does not ship TypeScript types; you may need to define your own or use @ts-ignore.","wrong":"import { WebExtension } from 'webpack-target-webextension'","symbol":"TypeScript usage","correct":"import WebExtension from 'webpack-target-webextension'"}],"quickstart":{"code":"const path = require('path');\nconst HtmlPlugin = require('html-webpack-plugin');\nconst CopyPlugin = require('copy-webpack-plugin');\nconst WebExtension = require('webpack-target-webextension');\n\nmodule.exports = {\n  context: __dirname,\n  entry: {\n    background: './src/background/index.js',\n    content: './src/content-script/index.js',\n    options: './src/options-page/index.js',\n  },\n  output: {\n    path: path.join(__dirname, 'dist'),\n  },\n  plugins: [\n    new HtmlPlugin({ filename: 'options.html', chunks: ['options'] }),\n    new WebExtension({\n      background: { pageEntry: 'background' },\n    }),\n    new CopyPlugin({\n      patterns: [{ from: 'manifest.json' }],\n    }),\n  ],\n};","lang":"javascript","description":"Minimal webpack config for a Web Extension using the plugin. Sets up entries for background, content script, and options page, with HTML generation and manifest copy."},"warnings":[{"fix":"Add '/*.js' to web_accessible_resources in manifest.json with appropriate matches.","message":"All JS files must be added to web_accessible_resources for dynamic import() to work in content scripts. This allows normal websites to fetch those files.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Include 'scripting' in permissions and set background: { pageEntry: 'background' } with no classicLoader: false.","message":"For Manifest V3, if you use chrome.scripting.executeScript, you must have 'scripting' permission and options.background configured with classicLoader not false.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use 'npm install webpack-target-webextension@0.2.1' for webpack 4.","message":"The plugin is designed for webpack 5; using it with webpack 4 will fail. Pin to version 0.2.1 for webpack 4 support.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add '\"resources\": [\"/hot/*.js\", \"/hot/*.json\"], \"matches\": [\"<all_urls>\"]' to web_accessible_resources.","message":"Hot Module Reload (HMR) requires additional web_accessible_resources entries for /hot/*.js and /hot/*.json files during development.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"For older browsers, set output.environment.dynamicImport to false to use alternative methods, or use the classic loader.","message":"The plugin's chunk loader for content scripts uses dynamic import() by default, which requires Firefox 89+ or Chrome 63+.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add '\"resources\": [\"/*.js\"], \"matches\": [\"<all_urls>\"]' to your manifest.json's web_accessible_resources.","cause":"Dynamic import() in content script is blocked because JS files are not listed in web_accessible_resources.","error":"Error: ChunkLoadError: Loading chunk 0 failed. (error: TypeError: Failed to fetch dynamically imported module: ...)"},{"fix":"Configure the WebExtension plugin with background: { pageEntry: 'background' } in webpack config, and ensure the background entry exists.","cause":"The plugin requires a background page entry when using classic loader for background scripts.","error":"TypeError: Cannot read properties of undefined (reading 'pageEntry')"},{"fix":"Downgrade to version 0.2.1: 'npm install webpack-target-webextension@0.2.1'.","cause":"Installed version incompatible with webpack 4.","error":"Error: webpack-target-webextension requires webpack >=5.0.0"},{"fix":"Run 'npm install webpack-target-webextension --save-dev'.","cause":"Package not installed or not in node_modules.","error":"Module not found: Error: Can't resolve 'webpack-target-webextension'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}