Webpackon

@webpackon/use-react-refresh

Adds react-refresh for development.

Supported loaders:
- babel-loader (+ ts)
- swc-loader (+ ts)

Install

``shell
npm i @webpackon/use-react-refresh --save
`

`shell
yarn add @webpackon/use-react-refresh
`

API

`ts
const { useReactRefresh } = require('@webpackon/use-react-refresh');

useReactRefresh(params: UseReactRefreshParams)(config: WebpackConfig)
`

$3


`ts
type UseReactRefreshParams = {
mode: 'development' | 'production';
transformRuntime?: 'automatic' | 'classic';
};
`

- `mode` - webpack mode
- `swcTransformRuntime` - swc option (default - `automatic`)

Example with babel + ts

Full examples are here

`js
const path = require('path');

const { compose } = require('@webpackon/core');
const { useTs } = require('@webpackon/use-ts');
const { useReactRefresh } = require('@webpackon/use-react-refresh');
const { useBabel } = require('@webpackon/use-babel');

module.exports = (_, { mode }) =>
compose(
useReactRefresh({ mode }),
useBabel({ useTs: true }),
useTs(),
)({
target: 'web',
entry: path.resolve(__dirname, 'src', 'index.tsx'),
});

`

Example with swc and ts

`js
const path = require('path');

const { compose } = require('@webpackon/core');
const { useTs } = require('@webpackon/use-ts');
const { useReactRefresh } = require('@webpackon/use-react-refresh');

module.exports = (_, { mode }) =>
compose(
useReactRefresh({ mode }),
useTs(),
)({
target: 'web',
entry: path.resolve(__dirname, 'src', 'index.tsx'),
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: {
loader: 'swc-loader',
options: {
jsc: {
parser: {
syntax: 'typescript'
}
}
}
}
}
]
}
});

``