Rspack

https://rspack.rs
Admin
Rspack is a fast Rust-based bundler for the web designed to provide high-performance builds with...
Tokens:510,236
Snippets:4,910
Trust Score:8.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Run rust-lldb on arco-pro example

Source: https://rspack.rs/contribute/development/debugging

Starts rust-lldb with the node command for the arco-pro example. Press 'r' to run and get detailed panic information.

```bash
rspack/examples/arco-pro ❯ rust-lldb -- node ../../packages/rspack-cli/bin/rspack build
```

--------------------------------

### ProvideSharedPlugin configuration example

Source: https://rspack.rs/plugins/low-level-plugins

The shorthand form provides the locally installed react package under the react share key and infers its version from the package metadata.

```javascript
import { sharing } from '@rspack/core';

export default {
  plugins: [
    new sharing.ProvideSharedPlugin({
      provides: ['react'],
    }),
  ],
};
```

--------------------------------

### Example entry.js for environment variables

Source: https://rspack.rs/plugins/environment-plugin

Example code that uses process.env variables.

```js
if (process.env.NODE_ENV === 'production') {
  console.log('Welcome to production');
}
if (process.env.DEBUG) {
  console.log('Debugging output');
}
```

--------------------------------

### Install dependencies with bun

Source: https://rspack.rs/guide/integrations/node

Install Rspack and helper dependencies using bun.

```sh
bun add @rspack/core @rspack/cli @rspack/dev-server webpack-node-externals run-script-webpack-plugin -D
```

--------------------------------

### createChildCompiler usage example

Source: https://rspack.rs/api/javascript-api/compilation

Starts a child compiler with 'child-entry.js' as the entry and outputs to 'dist/child'. Uses the make hook and EntryPlugin.

```js
compiler.hooks.make.tap('MyPlugin', (compilation) => {
  const childCompiler = compilation.createChildCompiler(
    'ChildCompiler',
    {
      path: 'dist/child',
    },
    [new compiler.rspack.EntryPlugin(compiler.context, './child-entry.js')],
  );
  childCompiler.compile((err, childCompilation) => {});
});
```

--------------------------------

### rspack.config.mjs example for buildHttp

Source: https://rspack.rs/config/experiments

Example configuration for enabling buildHttp with allowedUris, lockfileLocation, and cacheLocation.

```javascript
import path from 'node:path';

export default {
  experiments: {
    buildHttp: {
      allowedUris: ['https://example.com/'],
      lockfileLocation: path.join(import.meta.dirname, 'my_project.lock'),
      cacheLocation: path.join(import.meta.dirname, 'my_project.lock.data'),
    },
  },
};
```

--------------------------------

### Install dependencies with deno

Source: https://rspack.rs/guide/integrations/node

Install Rspack and helper dependencies using deno.

```sh
deno add npm:@rspack/core npm:@rspack/cli npm:@rspack/dev-server npm:webpack-node-externals npm:run-script-webpack-plugin -D
```

--------------------------------

### Install rspack-best-practices skill with npx, yarn, pnpm, bunx, or deno

Source: https://rspack.rs/guide/start/ai

Install the rspack-best-practices skill using the skills package with your preferred package manager. Each command is equivalent and installs the same skill.

```sh
npx skills add rstackjs/agent-skills --skill rspack-best-practices
```

```sh
yarn dlx skills add rstackjs/agent-skills --skill rspack-best-practices
```

```sh
pnpm dlx skills add rstackjs/agent-skills --skill rspack-best-practices
```

```sh
bunx skills add rstackjs/agent-skills --skill rspack-best-practices
```

```sh
deno run -A npm:skills add rstackjs/agent-skills --skill rspack-best-practices
```

--------------------------------

### Install @module-federation/runtime-tools

Source: https://rspack.rs/plugins/module-federation-plugin

Install the required runtime package using npm, yarn, pnpm, bun, or deno.

```sh
npm add @module-federation/runtime-tools
```

```sh
yarn add @module-federation/runtime-tools
```

```sh
pnpm add @module-federation/runtime-tools
```

```sh
bun add @module-federation/runtime-tools
```

```sh
deno add npm:@module-federation/runtime-tools
```

--------------------------------

### Install Less and less-loader with bun

Source: https://rspack.rs/guide/languages/css

Install the necessary dependencies for Less processing using bun.

```sh
bun add less less-loader -D
```

--------------------------------

### Install Less and less-loader with deno

Source: https://rspack.rs/guide/languages/css

Install the necessary dependencies for Less processing using deno.

```sh
deno add npm:less npm:less-loader -D
```

--------------------------------

### Install next-rspack with bun

Source: https://rspack.rs/guide/integrations/next

Install the next-rspack package as a development dependency using bun.

```sh
bun add next-rspack -D
```

--------------------------------

### Install Xcode Command Line Tools

Source: https://rspack.rs/contribute/development/profiling

Run this command to install the necessary tools for Xcode Instruments.

```bash
xcode-select --install
```

--------------------------------

### treeShakingSharedPlugins configuration example

Source: https://rspack.rs/plugins/module-federation-plugin

Configuration example showing how to specify the plugin name and version in treeShakingSharedPlugins.

```ts
export default {
  // ...
  treeShakingSharedPlugins: ['my-build-plugin@0.0.2'],
};
```

--------------------------------

### Install next-rspack with deno

Source: https://rspack.rs/guide/integrations/next

Install the next-rspack package as a development dependency using deno.

```sh
deno add npm:next-rspack -D
```

--------------------------------

### Install @rstest/playwright with deno

Source: https://rspack.rs/guide/integrations/rstest

Install the Rstest Playwright integration and browser runtime using deno.

```sh
deno add npm:@rstest/playwright npm:playwright -D
```

--------------------------------

### Install css-loader and style-loader via deno

Source: https://rspack.rs/guide/languages/css

Install css-loader and style-loader as development dependencies using deno.

```sh
deno add npm:css-loader npm:style-loader -D
```

--------------------------------

### Install css-loader and style-loader via bun

Source: https://rspack.rs/guide/languages/css

Install css-loader and style-loader as development dependencies using bun.

```sh
bun add css-loader style-loader -D
```

--------------------------------

### Install css-loader via bun

Source: https://rspack.rs/guide/languages/css

Install the css-loader package as a development dependency using bun.

```sh
bun add css-loader -D
```

--------------------------------

### Initialize project directory

Source: https://rspack.rs/guide/start/quick-start

Create a new directory and initialize a package.json file to start the project.

```bash
mkdir rspack-demo
cd rspack-demo
npm init -y
```

--------------------------------

### Import example

Source: https://rspack.rs/guide/advanced/lazy-barrel

Shows how consumers can import from a single barrel file entry point.

```javascript
import { Button, Card } from './components';
```

--------------------------------

### Example package.json fields for resolution

Source: https://rspack.rs/config/resolve

A sample package.json demonstrating browser and module fields used by mainFields.

```json
{
  "name": "foo",
  "browser": "./dist/browser.js",
  "module": "./dist/module.js"
}
```

--------------------------------

### ConsumeSharedPlugin configuration example

Source: https://rspack.rs/plugins/low-level-plugins

Consumes react as a singleton from the default share scope and falls back to the locally installed package without checking its version.

```javascript
import { sharing } from '@rspack/core';

export default {
  entry: './src/index.js',
  plugins: [
    new sharing.ConsumeSharedPlugin({
      consumes: {
        react: {
          import: 'react',
          requiredVersion: false,
          singleton: true,
        },
      },
    }),
  ],
};
```

--------------------------------

### compiler.watchFileSystem

Source: https://rspack.rs/api/javascript-api/compiler

Get the proxy object used for watching files or directories changes, which provides a watch method to start watching and passes in changed and removed items in the callback.

```APIDOC
## compiler.watchFileSystem

### Description
Get the proxy object used for watching files or directories changes, which provides a `watch` method to start watching, and passes in the changed and removed items in the callback.

### Type
`WatchFileSystem`
```

--------------------------------

### Run rspack preview

Source: https://rspack.rs/api/cli

Execute the preview command to start the server for build output.

```bash
npx rspack preview
```

--------------------------------

### Example package.json exports and Rspack configuration

Source: https://rspack.rs/config/resolve

Demonstrates how package.json exports are matched based on the resolve.conditionNames configuration.

```json
{
  "name": "foo",
  "exports": {
    ".": {
      "import": "./index-import.js",
      "require": "./index-require.js",
      "node": "./index-node.js"
    },
    "./bar": {
      "node": "./bar-node.js",
      "require": "./bar-require.js"
    },
    "./baz": {
      "import": "./baz-import.js",
      "node": "./baz-node.js"
    }
  }
}
```

```js
export default {
  resolve: {
    conditionNames: ['require', 'node'],
  },
};
```

--------------------------------

### Configure CopyRspackPlugin 'context' option

Source: https://rspack.rs/plugins/copy-rspack-plugin

Shows how to set the 'context' option in rspack.config.mjs. It is a path prepended to 'from' and removed from the start of the result paths. This example copies './src/*.json' to './dist/*.json'.

```JavaScript
import { rspack } from '@rspack/core';
import path from 'node:path';

export default {
  plugins: [
    new rspack.CopyRspackPlugin({
      // `./src/*.json` -> `./dist/*.json`
      patterns: [
        { from: '*.json', context: path.join(import.meta.dirname, 'src') },
      ],
    }),
  ],
};
```

--------------------------------

### Run rust-lldb with node command

Source: https://rspack.rs/contribute/development/debugging

Starts rust-lldb to debug a node process running Rspack. After launching, press 'r' to run the program. Useful for getting panic information from debug builds.

```bash
rust-lldb -- node /path/to/rspack build
```

--------------------------------

### FetchCompileAsyncWasmPlugin configuration with async WebAssembly

Source: https://rspack.rs/plugins/low-level-plugins

Disables automatic WebAssembly loading setup and installs the fetch implementation directly. The entry file imports a WebAssembly module and uses it. For a regular web build, prefer output.wasmLoading: 'fetch'.

```javascript
import { add } from './add.wasm';

console.log(add(1, 2));
```

```javascript
import { rspack } from '@rspack/core';

export default {
  target: 'web',
  entry: './src/index.js',
  experiments: {
    asyncWebAssembly: true,
  },
  output: {
    wasmLoading: false,
  },
  plugins: [new rspack.web.FetchCompileAsyncWasmPlugin()],
};
```

--------------------------------

### Match modules by package name prefix with rules[].descriptionData

Source: https://rspack.rs/config/module-rules

Use this rule to match modules based on a property in their description file (typically package.json). A string condition matches property values that start with the given string, so this example matches packages such as 'react' and 'react-dom'.

```js
export default {
  module: {
    rules: [
      {
        descriptionData: { name: 'react' },
        // Other rule options...
      },
    ],
  },
};
```

--------------------------------

### Configuration files for conditional builds

Source: https://rspack.rs/plugins/normal-module-replacement-plugin

Example configuration files used for different build targets.

```js
export const config = {
  title: 'I am version A',
};
```

```js
export const config = {
  title: 'I am version B',
};
```

--------------------------------

### watchRun async tap: await async operation

Source: https://rspack.rs/api/plugin-api/compiler-hooks

Use this asynchronous tap on the watchRun hook to perform async work before compilation starts. The tapPromise method expects a promise-returning function; the example awaits someAsyncOperation(). This hook only fires in watch mode via compiler.watch().

```js
class ExamplePlugin {
  apply(compiler) {
    compiler.hooks.watchRun.tapPromise('ExamplePlugin', compiler => {
      await someAsyncOperation();
    });
  }
}
```

--------------------------------

### Install Sass dependencies

Source: https://rspack.rs/guide/languages/css

Install the required Sass compiler and loader packages.

```sh
npm add sass-embedded sass-loader -D
```

```sh
yarn add sass-embedded sass-loader -D
```

```sh
pnpm add sass-embedded sass-loader -D
```

```sh
bun add sass-embedded sass-loader -D
```

```sh
deno add npm:sass-embedded npm:sass-loader -D
```

--------------------------------

### Project structure with utils.js

Source: https://rspack.rs/plugins/case-sensitive-plugin

Shows the project structure used in the example, with a.js and b.js importing utils.js with different casing.

```text
src/
  ├── a.js
  ├── b.js
  └── utils.js
```

--------------------------------

### SharePlugin configuration example

Source: https://rspack.rs/plugins/low-level-plugins

Provides the local react package as a fallback and consumes a singleton instance from the default share scope.

```javascript
import { sharing } from '@rspack/core';

export default {
  plugins: [
    new sharing.SharePlugin({
      enhanced: false,
      shared: {
        react: {
          requiredVersion: false,
          singleton: true,
        },
      },
    }),
  ],
};
```

--------------------------------

### Building with environment variables

Source: https://rspack.rs/plugins/normal-module-replacement-plugin

Commands to build the project with different environment targets and their expected output.

```bash
rspack --env APP_TARGET=VERSION_A
=> 'I am version A'

rspack --env APP_TARGET=VERSION_B
=> 'I am version B'
```

--------------------------------

### Install dependencies with pnpm

Source: https://rspack.rs/guide/integrations/node

Install Rspack and helper dependencies using pnpm.

```sh
pnpm add @rspack/core @rspack/cli @rspack/dev-server webpack-node-externals run-script-webpack-plugin -D
```

--------------------------------

### Install dependencies with yarn

Source: https://rspack.rs/guide/integrations/node

Install Rspack and helper dependencies using yarn.

```sh
yarn add @rspack/core @rspack/cli @rspack/dev-server webpack-node-externals run-script-webpack-plugin -D
```

--------------------------------

### Install jemalloc profiling tools on Debian or Ubuntu

Source: https://rspack.rs/contribute/development/profiling

Install the necessary packages including heaptrack, libjemalloc-dev, and graphviz to enable profiling.

```sh
sudo apt install heaptrack libjemalloc-dev graphviz
```

--------------------------------

### Install dependencies with npm

Source: https://rspack.rs/guide/integrations/node

Install Rspack and helper dependencies using npm.

```sh
npm add @rspack/core @rspack/cli @rspack/dev-server webpack-node-externals run-script-webpack-plugin -D
```

--------------------------------

### Install @rspack/dev-server with bun

Source: https://rspack.rs/guide/features/dev-server

Install the dev server as a dev dependency using bun. Required before using `rspack dev`, `rspack serve`, or `rspack preview`.

```sh
bun add @rspack/dev-server -D
```

--------------------------------

### Install Chromium browser binary

Source: https://rspack.rs/guide/integrations/rstest

Install the required Chromium browser binary for Playwright.

```bash
pnpm exec playwright install chromium
```

--------------------------------

### Built-in constructor syntax examples

Source: https://rspack.rs/guide/features/web-workers

Demonstration of Worker and SharedWorker constructors.

```js
const worker = new Worker(new URL('./worker.js', import.meta.url));

const sharedWorker = new SharedWorker(
  new URL('./shared-worker.js', import.meta.url),
);
```

--------------------------------

### __resourceQuery Example and Source/Compiled

Source: https://rspack.rs/api/runtime-api/module-variables

Example of a require call with a query string, followed by the source and compiled forms of __resourceQuery. The compiled output shows the query string literal.

```js
require('file.js?test');
```

```js
__resourceQuery
```

```js
'?test';
```

--------------------------------

### Install next-rspack with pnpm

Source: https://rspack.rs/guide/integrations/next

Install the next-rspack package as a development dependency using pnpm.

```sh
pnpm add next-rspack -D
```

--------------------------------

### Install next-rspack with yarn

Source: https://rspack.rs/guide/integrations/next

Install the next-rspack package as a development dependency using yarn.

```sh
yarn add next-rspack -D
```

--------------------------------

### Install next-rspack with npm

Source: https://rspack.rs/guide/integrations/next

Install the next-rspack package as a development dependency using npm.

```sh
npm add next-rspack -D
```

--------------------------------

### CSS style.css example

Source: https://rspack.rs/guide/languages/css

An example of a CSS file using both standard and local selectors.

```css
.button {
  color: red;
}

:local(.title) {
  color: blue;
}
```

--------------------------------

### Example output directory structure

Source: https://rspack.rs/config/filename-placeholders

The resulting directory structure after applying the [name] and [contenthash] placeholders.

```text
src/
├── main.js
└── list.js
dist/
├── main.abcdefghabcdefgh.js
└── list.qwertyuiqwertyui.js
```

--------------------------------

### Using Resolver API and ResolverFactory

Source: https://rspack.rs/api/javascript-api/resolver

Shows how to import Rspack, access the resolver API, and use both the default resolver and a custom ResolverFactory with sync and async methods. The example includes resolving a module path with default options and creating a custom resolver with custom resolve options.

```javascript
import { rspack } from '@rspack/core';

const { resolver } = rspack.experiments;

// Directly use Resolver API with default options
const { path: resolvedPath } = resolver.sync(contextPath, './index.js');
const { path: resolvedPath } = await resolver.async(contextPath, './index.js');

// Use ResolverFactory with custom options
const customResolver = new resolver.ResolverFactory(resolveOptions);
const result = customResolver.sync(contextPath, './request.js');
const result = await customResolver.async(contextPath, './request.js');
```

--------------------------------

### Install Less and less-loader with pnpm

Source: https://rspack.rs/guide/languages/css

Install the necessary dependencies for Less processing using pnpm.

```sh
pnpm add less less-loader -D
```

--------------------------------

### Replace outputFileSystem with memfs

Source: https://rspack.rs/api/javascript-api

Demonstrates how to replace the default outputFileSystem with memfs to write files to memory instead of disk.

```javascript
import { createFsFromVolume, Volume } from 'memfs';
import { rspack } from '@rspack/core';

const fs = createFsFromVolume(new Volume());
const compiler = rspack({/* options */});

compiler.outputFileSystem = fs;
compiler.run((err, stats) => {
  // Read the output later:
  const content = fs.readFileSync('...');
  compiler.close((closeErr) => {
    // ...
  });
});
```

--------------------------------

### Install Less and less-loader with yarn

Source: https://rspack.rs/guide/languages/css

Install the necessary dependencies for Less processing using yarn.

```sh
yarn add less less-loader -D
```

--------------------------------

### Configure output.library.type: 'window'

Source: https://rspack.rs/config/output

Assigns the entry point return value to the window object.

```js
export default {
  output: {
    library: {
      name: 'MyLibrary',
      type: 'window',
    },
  },
};
```

```js
window['MyLibrary'] = _entry_return_;

window.MyLibrary.doSomething();
```

--------------------------------

### Install Less and less-loader with npm

Source: https://rspack.rs/guide/languages/css

Install the necessary dependencies for Less processing using npm.

```sh
npm add less less-loader -D
```

--------------------------------

### Rspack preview command help output

Source: https://rspack.rs/api/cli

Displays the usage syntax and available configuration options for the rspack preview command.

```text
rspack preview [dir]

run the rspack server for build output

Positionals:
  dir  directory want to preview                                        [string]

Options:
      --publicPath  static resource server path                         [string]
      --port        preview server port                                 [number]
      --host        preview server host                                 [string]
      --open        open browser                                       [boolean]
      --server      Configuration items for the server.                 [string]
```

--------------------------------

### Install PostCSS dependencies

Source: https://rspack.rs/guide/languages/css

Install the necessary PostCSS packages using your preferred package manager.

```sh
npm add postcss postcss-loader -D
```

```sh
yarn add postcss postcss-loader -D
```

```sh
pnpm add postcss postcss-loader -D
```

```sh
bun add postcss postcss-loader -D
```

```sh
deno add npm:postcss npm:postcss-loader -D
```

--------------------------------

### Install css-loader via deno

Source: https://rspack.rs/guide/languages/css

Install the css-loader package as a development dependency using deno.

```sh
deno add npm:css-loader -D
```

--------------------------------

### Install @rspack/dev-server with deno

Source: https://rspack.rs/guide/features/dev-server

Install the dev server as a dev dependency using deno. Required before using `rspack dev`, `rspack serve`, or `rspack preview`.

```sh
deno add npm:@rspack/dev-server -D
```
Tokens:
Raw