{"id":20196,"library":"lwc-webpack-plugin","title":"LWC Webpack Plugin","description":"Webpack plugin for building Lightning Web Components (LWC) in any web framework project. Current stable version is 3.1.0, released on a monthly cadence. It allows you to use LWC within any web framework project that uses Webpack. Key differentiators: Provides seamless integration of LWC components with Webpack, supports TypeScript through additional Babel configuration, and allows custom module resolution via lwc.config.json or package.json. Compared to alternatives like raw LWC compiler, it automates component compilation and asset handling within the Webpack bundling process.","status":"active","version":"3.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/salesforce/lwc-webpack-plugin","tags":["javascript","lwc","salesforce","web components","lightning","webpack","typescript"],"install":[{"cmd":"npm install lwc-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add lwc-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add lwc-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for module resolution of LWC components","package":"@lwc/module-resolver","optional":false},{"reason":"Peer dependency providing the LWC compiler and runtime","package":"lwc","optional":false}],"imports":[{"note":"CommonJS is the primary import style; ESM import may not work due to lack of default export.","wrong":"import LwcWebpackPlugin from 'lwc-webpack-plugin'","symbol":"LwcWebpackPlugin","correct":"const LwcWebpackPlugin = require('lwc-webpack-plugin')"},{"note":"Named import is incorrect; it's a default export only.","wrong":"import { LwcWebpackPlugin } from 'lwc-webpack-plugin'","symbol":"LwcWebpackPlugin","correct":"import LwcWebpackPlugin from 'lwc-webpack-plugin'"},{"note":"Constructor accepts optional options object; no arguments needed for default config.","wrong":"const plugin = new LwcWebpackPlugin({...})","symbol":"LwcWebpackPlugin","correct":"const plugin = new LwcWebpackPlugin()"}],"quickstart":{"code":"const LwcWebpackPlugin = require('lwc-webpack-plugin')\n\nmodule.exports = {\n  plugins: [new LwcWebpackPlugin()]\n}","lang":"javascript","description":"Basic setup: require the plugin and add it to webpack plugins array with default module resolution from lwc.config.json."},"warnings":[{"fix":"Install peer deps: npm install --save-dev lwc@^2 @lwc/module-resolver@^2","message":"In v3.0.0, lwc and @lwc/module-resolver became peer dependencies.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Remove stylesheetConfig from plugin options.","message":"stylesheetConfig option is deprecated since lwc v3.1.3 and results in a NOOP.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Ensure you have the correct alias configuration in webpack for @lwc/synthetic-shadow.","message":"If you use lwc v3 packages, the @lwc/synthetic-shadow alias may break webpack without proper configuration.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Ensure all imported CSS files exist and are correctly referenced.","message":"Missing CSS imports for non-implicit CSS files may cause warnings or errors.","severity":"gotcha","affected_versions":">=3.0.3"}],"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 lwc@^2","cause":"Missing peer dependency lwc.","error":"Error: Cannot find module 'lwc'"},{"fix":"npm install --save-dev @lwc/module-resolver@^2","cause":"Missing peer dependency @lwc/module-resolver.","error":"Error: Cannot find module '@lwc/module-resolver'"},{"fix":"Add resolve.alias: { '@lwc/synthetic-shadow': require.resolve('@lwc/synthetic-shadow') } to webpack config.","cause":"Alias not configured for @lwc/synthetic-shadow in webpack.","error":"Module not found: Error: Can't resolve '@lwc/synthetic-shadow'"},{"fix":"Use const LwcWebpackPlugin = require('lwc-webpack-plugin') or import LwcWebpackPlugin from 'lwc-webpack-plugin'","cause":"Using named import instead of default import.","error":"TypeError: LwcWebpackPlugin is not a constructor"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}