Rspack Plugins

A collection of Rspack plugins that can be helpful for web development.

Installation

Install the package first via NPM.

npm install @hafizuddin/rspack-plugins

Plugins

CombineFilesPlugin

This plugin is used to combine multiple files into a single file. Useful for handling legacy code.

const rspack = require('@rspack/core');
const { defineConfig } = require('@rspack/cli');
const { CombineFilesPlugin } = require('@hafizuddin/rspack-plugins');

module.exports = defineConfig({
    plugins: [
        new CombineFilesPlugin({
            files: [
                './resources/js/code-a.js',
                './resources/js/code-b.js',
                './resources/js/code-c.js',
            ],
            output: 'js/combined.js',
            minify: true,
        }),
    ],
});

CssOnlyPlugin

This plugin is used to removed generated JS files for CSS-only entries.

const rspack = require('@rspack/core');
const { defineConfig } = require('@rspack/cli');
const path = require('path');
const { CssOnlyPlugin } = require('@hafizuddin/rspack-plugins');

module.exports = defineConfig({
    entry: [
        app: ['./resources/css/app.css', './resources/js/app.js'],
        aux: './resources/css/aux.css',
    ],
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'js/[name].js',
        cssFilename: 'css/[name].css',
    },
    plugins: [
        new CssOnlyPlugin(['aux']),
    ],
});

LightningcssMinifyPlugin

This plugin is used to enable CSS minification using Lightning CSS.

const rspack = require('@rspack/core');
const { defineConfig } = require('@rspack/cli');
const { LightningcssMinifyPlugin } = require('@hafizuddin/rspack-plugins');

module.exports = defineConfig({
    optimization: {
        minimize: true,
        minimizer: [
            new rspack.SwcJsMinimizerRspackPlugin({
                format: {
                    comments: false,
                },
            }),
            new LightningcssMinifyPlugin(),
        ],
    },
});

Loaders

noop loader

This loader does nothing.

lightningcss loader

This loader uses Lightning CSS to process the CSS. Can be used to replace postcss-loader with autoprefixer plugin.

minify-tagged-html-template loader

This loader minifies tagged HTML templates within JS code. Suitable for removing unnecessary whitespaces from the code.

Loader Example

const rspack = require('@rspack/core');
const { defineConfig } = require('@rspack/cli');
const { resolveLoader } = require('@hafizuddin/rspack-plugins');

module.exports = defineConfig({
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'builtin:swc-loader',
                    },
                    {
                        loader: resolveLoader('minify-tagged-html-template'),
                        options: {
                            tagFunctionNames: ['minifyHtml'],
                            removeTagFunction: true, // minifyHtml will be removed
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                type: 'css',
                use: [
                    {
                        loader: resolveLoader('noop'),
                    },
                    {
                        loader: resolveLoader('lightningcss'),
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                outputStyle: 'expanded',
                            },
                        },
                    },
                ],
            },
        ],
    },
});

Security Vulnerabilities

If you discover any security related issues, please email [email protected] instead of using the issue tracker. Please prefix the subject with Rspack Plugins:.

Credits

• Mohd Hafizuddin M Marzuki
• All Contributors

License

The MIT License (MIT). Please see License File for more information.