Neoteric Plumbing Mishap

    lwc-webpack-plugin
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published

    lwc-webpack-plugin

    This plugin allows you to use LWC within any web framework project that uses Webpack.

    Install

    npm install --save-dev lwc-webpack-plugin lwc @lwc/module-resolver
    

    Note that you must install your own dependencies for lwc and @lwc/module-resolver.

    Usage

    const LwcWebpackPlugin = require('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. You can read more about module configuration in this blog, or in this RFC.

    Pass the module configuration as parameter to the plugin, if you prefer to not use any of the above mentioned LWC module configuration options.

    const LwcWebpackPlugin = require('lwc-webpack-plugin')
    
    module.exports = {
        plugins: [
            new LwcWebpackPlugin({
                modules: [
                    { npm: 'lwc-recipes-oss-ui-components' },
                    { npm: 'lightning-base-components' }
                ]
            })
        ]
    }

    The plugin takes also two additional configuration options:

    • stylesheetConfig
    • outputConfig

    These options are 1:1 mappings of the LWC Compiler options, which are documented here.

    Read more about Lightning Web Components here.

    Live App

    If you want to see Lightning Web Components in action - check out https://recipes.lwc.dev.

    TypeScript

    If you want to use TypeScript in your LWC components, you can install the necessary Babel dependencies:

    npm install --save-dev \
        babel-loader@^8 \
        @babel/preset-typescript@^7 \
        @babel/plugin-syntax-decorators@^7

    Then add this to your webpack.config.js:

    module.exports = {
      plugins: [
        new LwcWebpackPlugin(),
        // Add this _after_ LwcWebpackPlugin:
        {
          apply(compiler) {
            compiler.options.module.rules.push({
              test: /\.ts$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-typescript'],
                  plugins: [['@babel/plugin-syntax-decorators', { legacy: true }]],
                }
              }
            })
          }
        }
      ]
    }

    You may customize the babel-loader settings to suit your needs.

    Tests

    To run the tests in this repo, do:

    yarn test
    

    To update snapshot files:

    UPDATE_SNAPSHOTS=1 yarn test
    

    To run code coverage tests:

    yarn test:coverage
    

    Install

    npm i lwc-webpack-plugin

    DownloadsWeekly Downloads

    1,146

    Version

    3.0.0

    License

    BSD-3-Clause

    Unpacked Size

    17.8 kB

    Total Files

    13

    Last publish

    Collaborators

    • dturissini
    • nolanlawson
    • jodarove
    • muenzpraeger