rspack.config.js

gistfile1.txt

/**
 * @type {import('@rspack/cli').Configuration}
 */
const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
const pkg = require('./package.json');
const rspack = require('@rspack/core');
const path = require('path');
const isDev = process.env.NODE_ENV === 'development';
const isDevBuild = process.env.NODE_ENV === 'none'
const VERSION = pkg.version;

console.log('Mode:', process.env.NODE_ENV);
console.log('Creating version:', VERSION);

module.exports = {
    context: __dirname,
    mode: process.env.NODE_ENV,
    devtool: 'hidden-source-map',
    experiments: {
        css: true,
    },
    entry: {
        main: './src/index.tsx',
        migrationTool: './migrationTool/index.tsx',
        insights: './insights/index.tsx',
    },
    output: {
        publicPath: `https://www.somedevtunnel.com/static/`,
        path: path.resolve(__dirname, 'build'),
        clean: true,
        filename: isDev || isDevBuild ? '[name].js' : `[name]${VERSION}.min.js`,
        cssFilename: isDev|| isDevBuild ? '[name].css' : `[name]${VERSION}.min.css`,
        assetModuleFilename: isDev || isDevBuild ? '[name][ext]' : `[name]${VERSION}[ext]`,
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json'],
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: [/node_modules/],
                loader: 'builtin:swc-loader',
                options: {
                    jsc: {
                        parser: {
                            syntax: 'typescript',
                        },
                    },
                },
                type: 'javascript/auto',
            },
            {
                test: /\.[jt]sx$/,
                use: {
                    loader: 'builtin:swc-loader',
                    options: {
                        jsc: {
                            parser: {
                                syntax: 'typescript',
                                jsx: true,
                            },
                            transform: {
                                react: {
                                    development: isDev,
                                    refresh: isDev,
                                },
                            },
                        },
                    },
                },
            },
            {
                test: /\.s(a|c)ss$/,
                use: ['postcss-loader', 'sass-loader'],
                type: 'css/auto',
            },
            {
                test: /\.svg$/i,
                issuer: /\.[jt]sx?$/,
                use: { loader: '@svgr/webpack', options: { icon: true } },
            },
        ],
    },
    plugins: [
        isDev && new ReactRefreshPlugin(),
        new rspack.ProvidePlugin({
            process: [require.resolve('process/browser')],
        }),
        new rspack.CopyRspackPlugin({
            patterns: [
                {
                    from: './node_modules/@selectize/selectize/dist/js/standalone/selectize.min.js',
                    to: isDev || isDevBuild ? 'selectize.js' : `selectize${VERSION}.min.js`,
                },
                {
                    from: './src/legacyFunctions.js',
                    to: isDev || isDevBuild ? 'legacyFunctions.js' : `legacyFunctions${VERSION}.min.js`,
                },
            ],
        }),
    ],
    devServer: {
        static: false,
        hot: true,
        liveReload: false,
        allowedHosts: 'all',
        port: 2910,
        headers: { 'Access-Control-Allow-Origin': '*' },
        devMiddleware: {
            writeToDisk: true,
        },
        client: {
            logging: "info",
            webSocketURL: {
                hostname: "127.0.0.1",
            },
        },
    }
};