LWC Webpack Plugin

3.1.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: Cannot find module 'lwc' ↓

cause Missing peer dependency lwc.

fix

npm install --save-dev lwc@^2

error Error: Cannot find module '@lwc/module-resolver' ↓

cause Missing peer dependency @lwc/module-resolver.

fix

npm install --save-dev @lwc/module-resolver@^2

error Module not found: Error: Can't resolve '@lwc/synthetic-shadow' ↓

cause Alias not configured for @lwc/synthetic-shadow in webpack.

fix

Add resolve.alias: { '@lwc/synthetic-shadow': require.resolve('@lwc/synthetic-shadow') } to webpack config.

error TypeError: LwcWebpackPlugin is not a constructor ↓

cause Using named import instead of default import.

fix

Use const LwcWebpackPlugin = require('lwc-webpack-plugin') or import LwcWebpackPlugin from 'lwc-webpack-plugin'

Warnings

breaking In v3.0.0, lwc and @lwc/module-resolver became peer dependencies. ↓

fix Install peer deps: npm install --save-dev lwc@^2 @lwc/module-resolver@^2

deprecated stylesheetConfig option is deprecated since lwc v3.1.3 and results in a NOOP. ↓

fix Remove stylesheetConfig from plugin options.

gotcha If you use lwc v3 packages, the @lwc/synthetic-shadow alias may break webpack without proper configuration. ↓

fix Ensure you have the correct alias configuration in webpack for @lwc/synthetic-shadow.

gotcha Missing CSS imports for non-implicit CSS files may cause warnings or errors. ↓

fix Ensure all imported CSS files exist and are correctly referenced.

Install

npm install lwc-webpack-plugin

yarn add lwc-webpack-plugin

pnpm add lwc-webpack-plugin

Imports

LwcWebpackPlugin
wrong
```
import LwcWebpackPlugin from 'lwc-webpack-plugin'
```
correct
```
const LwcWebpackPlugin = require('lwc-webpack-plugin')
```
CommonJS is the primary import style; ESM import may not work due to lack of default export.

LwcWebpackPlugin

wrong

import { LwcWebpackPlugin } from 'lwc-webpack-plugin'

correct

import LwcWebpackPlugin from 'lwc-webpack-plugin'

Named import is incorrect; it's a default export only.

LwcWebpackPlugin
wrong
```
const plugin = new LwcWebpackPlugin({...})
```
correct
```
const plugin = new LwcWebpackPlugin()
```
Constructor accepts optional options object; no arguments needed for default config.

Quickstart

Basic setup: require the plugin and add it to webpack plugins array with default module resolution from lwc.config.json.

const LwcWebpackPlugin = require('lwc-webpack-plugin')

module.exports = {
  plugins: [new LwcWebpackPlugin()]
}