Webpackon

@webpackon/use-react-refresh

Adds react-refresh for development.

Supported loaders:

• babel-loader (+ ts)
• swc-loader (+ ts)

Install

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

yarn add @webpackon/use-react-refresh

API

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

useReactRefresh(params: UseReactRefreshParams)(config: WebpackConfig)

UseReactRefreshParams

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

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

Example with babel + ts

Full examples are here

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

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'
                }
              }
            }
          }
        }
      ]
    }
  });