@utoo/pack

High-performance bundler core for the Utoo toolchain, powered by Turbopack .

@utoo/pack is the engine behind the Utoo build system. It leverages the incremental computation power of Turbopack and the performance of Rust to provide a lightning-fast development and build experience.

Key Features

Extreme Performance - Core bundling logic implemented in Rust via NAPI-RS
Turbopack Powered - Built on top of the same engine that powers Next.js Turbopack
Webpack Compatibility - Support for consuming webpack.config.js to simplify migration
Modern Web Support - Native support for TypeScript, JSX, CSS Modules, Less, Sass, and more
Extensible Architecture - Support for custom loaders, plugins, and flexible configuration
Fast HMR - Instant updates during development with optimized Hot Module Replacement

Installation

Terminal


ut install @utoo/pack --save-dev

Quick Start

Production Build

build.js


const { build } = require('@utoo/pack');
 
async function runBuild() {
  await build({
    config: {
      entry: [
        {
          import: "./src/index.ts",
          html: {
            template: "./index.html"
          }
        }
      ],
      output: {
        path: "./dist",
        filename: "[name].[contenthash:8].js",
        chunkFilename: "[name].[contenthash:8].js",
        clean: true
      },
      sourceMaps: true
    }
  });
}
 
runBuild();

Webpack Compatibility

@utoo/pack provides a partial compatibility layer for Webpack, allowing you to reuse existing configurations.

build.js


const { build } = require('@utoo/pack');
const webpackConfig = require('./webpack.config.js');
 
async function run() {
  await build({ ...webpackConfig, webpackMode: true });
}
 
run();

Not all Webpack features and plugins are supported. Check the Features page for details on supported configuration options.

Supported Features

@utoo/pack aims for high compatibility with the Webpack ecosystem while providing superior performance.

Category	Support
Entry	`name`, `import`, and `filename` templates
Module Rules	Most mainstream Webpack loaders via `loader-runner`
Resolve	Full support for `alias` and `extensions`
Styles	Less, Sass, PostCSS, CSS Modules, LightningCSS
Optimization	Minification, Tree Shaking, Module Concatenation
Frameworks	React (`styled-jsx`, `emotion`, `styled-components`)
Tools	Bundle Analyzer, Tracing Logs

Configuration

The bundler can be configured via utoopack.json or through the programmatic API.

Option	Description
`entry`	Define your application entry points
`define`	Build-time variable replacement
`externals`	Exclude specific dependencies from the bundle
`mode`	`development` or `production`
`resolve`	Module resolution (`alias`, `extensions`)
`module`	Custom loader rules
`optimization`	Minification, tree shaking, split chunks, and more
`styles`	Less, Sass, CSS Modules, Emotion, styled-components
`devServer`	Dev server (`hot`, `port`, `host`, `https`)
`stats`	Enable build statistics output

See Configuration for full details.