https://github.com/lukethacoder/lwc-webpack-plugin
⚡ An opinionated Webpack plugin for LWC
https://github.com/lukethacoder/lwc-webpack-plugin
lightning-web-components lwc salesforce webpack
Last synced: 3 months ago
JSON representation
⚡ An opinionated Webpack plugin for LWC
- Host: GitHub
- URL: https://github.com/lukethacoder/lwc-webpack-plugin
- Owner: lukethacoder
- License: bsd-3-clause
- Created: 2023-04-25T11:38:14.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-04T00:49:55.000Z (about 1 year ago)
- Last Synced: 2025-03-16T12:16:11.765Z (3 months ago)
- Topics: lightning-web-components, lwc, salesforce, webpack
- Language: TypeScript
- Homepage: https://npmjs.com/package/@lukethacoder/lwc-webpack-plugin
- Size: 207 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lwc-webpack-plugin
⚡ An opinionated Webpack plugin for LWC based on the official [`@salesforce/lwc-webpack-plugin`](https://github.com/salesforce/lwc-webpack-plugin).
This plugin allows you to use LWC within any web framework project that uses Webpack.
## Updates
A list of changes and additions to the official [`@salesforce/lwc-webpack-plugin`](https://github.com/salesforce/lwc-webpack-plugin) plugin.
- Adds support for namespaces and multi directory modules (as per [@lukethacoder/lwc-module-resolver](https://github.com/lukethacoder/lwc-module-resolver))
- Adds support for `rootDir`, instead of defaulting to `process.cwd()`
## Install
```
pnpm add -D @lukethacoder/lwc-webpack-plugin @lukethacoder/lwc-module-resolver lwc
```
Note that you must install your own dependencies for `lwc` and `@lukethacoder/lwc-module-resolver`.
## Usage
```javascript
const LwcWebpackPlugin = require('@lukethacoder/lwc-webpack-plugin')
module.exports = {
plugins: [new LwcWebpackPlugin()]
}
```
The above example assumes that you have configured LWC modules via `lwc.config.json` in your project root, or as `lwc` key in your `package.json`.
Pass the `module` configuration as parameter to the plugin, if you prefer to not use any of the above mentioned LWC module configuration options.
```javascript
const LwcWebpackPlugin = require('@lukethacoder/lwc-webpack-plugin')
module.exports = {
plugins: [
new LwcWebpackPlugin({
rootDir: './my-cool-project',
modules: [
{
dirs: [
'./shared/main/default/lwc',
'./project1/main/default/lwc',
'./project2/main/default/lwc',
],
namespace: 'c',
},
{ npm: 'lwc-recipes-oss-ui-components' },
{ npm: 'lightning-base-components' }
]
})
]
}
```
The plugin takes also three additional configuration options:
- `rootDir` - defaults to `process.cmd()`
- `stylesheetConfig`
- `outputConfig`
These options are 1:1 mappings of the LWC Compiler options, which are documented [here](https://github.com/salesforce/lwc/tree/master/packages/%40lwc/compiler#apis).