open-index/open-npm huggingface dataset:
npm package: @kdcloudjs/kwc-webpack-plugin
Description: Webpack Plugin for KWC
Latest version: 1.0.0

# @kdcloudjs/kwc-webpack-plugin

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

## Install

    npm install --save-dev @kdcloudjs/kwc-webpack-plugin @kdcloudjs/kwc @kdcloudjs/kwc-module-resolver

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

## Usage

```javascript
const KwcWebpackPlugin = require('@kdcloudjs/kwc-webpack-plugin')

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

The above example assumes that you have configured KWC modules via `kwc.config.json` in your project root, or as `kwc` 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 KWC module configuration options.

```javascript
const KwcWebpackPlugin = require('@kdcloudjs/kwc-webpack-plugin')

module.exports = {
    plugins: [
        new KwcWebpackPlugin({
            modules: [
                { npm: '@kdcloudjs/kingdee-base-components' }
            ]
        })
    ]
}
```

## TypeScript

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

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

Then add this to your `webpack.config.js`:

```js
module.exports = {
  plugins: [
    new KwcWebpackPlugin(),
    // Add this _after_ KwcWebpackPlugin:
    {
      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.