oxc-webpack-vn

Boost your Webpack build performance using the oxc-project (Oxidation Compiler) ecosystem. This package provides a high-performance loader and a suite of plugins for linting, formatting, and minification.

Requirements

• Webpack >= 5
• Node >= 20

Features

• oxc-webpack-vn: A lightning-fast replacement for babel-loader or ts-loader.
• OxcMinifyPlugin: Efficiently shrink your production bundles.
• OxLintWebpackPlugin: Catch errors early with Rust-powered linting.
• OxFmtWebpackPlugin: Format your code in milliseconds.

Installation

Install the package via your preferred package manager:

pnpm add -D oxc-webpack-vn
# or
npm install --save-dev oxc-webpack-vn
# or
yarn add -D oxc-webpack-vn

Usage

Basic Loader Configuration

Requirement:

pnpm add -D oxc-transform
# or
npm install --save-dev oxc-transform
# or
yarn add -D oxc-transform

webpack config example:

const isProd = process.env.NODE_ENV === 'production'

export default {
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'oxc-webpack-vn',
            options: {
              // https://oxc.rs/docs/guide/usage/transformer/lowering.html
              target: ['ES2026'],
              jsx: {
                target: 'ES2026',
                sourceMap: !isProd,
                development: !isProd,
                runtime: 'automatic',
                pragma: 'React.createElement',
                pragmaFrag: 'React.Fragment'
              },
              // When transforming TSX files:
              typescript: {
                jsxPragma: 'React.createElement', // same value with `jsx.pragma`
                jsxPragmaFrag: 'React.Fragment' // same value with `jsx.pragmaFrag`
              }
            },
          },
        ],
      },
    ],
  },
};

Basic minifier Configuration

Requirement:

pnpm add -D oxc-minify
# or
npm install --save-dev oxc-minify
# or
yarn add -D oxc-minify

webpack config example:

import { OxcMinifyPlugin } from 'oxc-webpack-vn'

export default {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      new OxcMinifyPlugin({
        // https://oxc.rs/docs/guide/usage/minifier/dead-code-elimination.html
        sourcemap: false,
        mangle: {
          toplevel: false
        },
        codegen: {
          removeWhitespace: true
        },
        compress: {
          sequences: false,
          dropConsole: true,
          dropDebugger: true
        }
      })
    ],
  },
};

Integrates oxlint into the Webpack.

Requirement:

pnpm add -D oxlint
# or
npm install --save-dev oxlint
# or
yarn add -D oxlint

Create a new config oxlint.config.ts in root project.

Example:

import { defineConfig } from 'oxlint'

// https://oxc.rs/docs/guide/usage/linter/config-file-reference.html
export default defineConfig({
  env: {
    browser: true
  },
  categories: {
    correctness: 'warn', // Catches potential bugs
    perf: 'warn', // Highly recommended for React apps
    suspicious: 'warn' // Catches code that looks wrong but might work
  },
  ignorePatterns: ['**/node_modules/**'],
  plugins: ['import', 'typescript', 'react'],
  rules: {
    'no-console': 'off',
    'no-unused-vars': 'warn',
    'no-await-in-loop': 'off',
    'no-prototype-builtins': 'off',
    'no-unused-expressions': 'off',
    'import/named': 'off',
    'import/no-unassigned-import': 'off',
    'import/no-unresolved': 'off',
    'import/no-named-as-default': 'off',
    'import/no-named-as-default-member': 'off',
    'typescript/no-explicit-any': 'off',
    'react/jsx-uses-react': 'off',
    'react/no-array-index-key': 'off',
    'react/react-in-jsx-scope': 'off',
    'react/jsx-no-constructed-context-values': 'off',
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  }
})

webpack config example:

import { OxLintWebpackPlugin } from 'oxc-webpack-vn'

export default {
  // ...
  plugins: [
    new OxLintWebpackPlugin({ fix: true, threads: 4 })
  ]
  // ...
};

Integrates oxfmt into the Webpack.

Requirement:

pnpm add -D oxfmt
# or
npm install --save-dev oxfmt
# or
yarn add -D oxfmt

Create a new config .oxfmtrc.json in root project.

Example:

{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "printWidth": 150,
  "arrowParens": "always",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "useTabs": false,
  "trailingComma": "none",
  "sortTailwindcss": {},
  "sortPackageJson": false,
  "ignorePatterns": []
}

webpack config example:

import { OxFmtWebpackPlugin } from 'oxc-webpack-vn'

export default {
  // ...
  plugins: [
    new OxFmtWebpackPlugin({ threads: 4 })
  ]
  // ...
};