Skip to Content
Docs@utoo/packOverview

@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

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.

CategorySupport
Entryname, import, and filename templates
Module RulesMost mainstream Webpack loaders via loader-runner
ResolveFull support for alias and extensions
StylesLess, Sass, PostCSS, CSS Modules, LightningCSS
OptimizationMinification, Tree Shaking, Module Concatenation
FrameworksReact (styled-jsx, emotion, styled-components)
ToolsBundle Analyzer, Tracing Logs

Configuration

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

OptionDescription
entryDefine your application entry points
defineBuild-time variable replacement
externalsExclude specific dependencies from the bundle
modedevelopment or production

See Configuration for full details.

Last updated on