module.exports = {
entry: {
main: './src/index.js',
支持的配置文件格式
Rspack 支持四种配置文件,支持.js
,.ts
,.cjs
和 .mjs
格式:
rspack.config.js
: 默认为 CommonJS
格式,如果所在 package.json 的 type 为 module 则变成 ES Module
格式。
rspack.config.ts
: TypeScript
格式,内部会使用 ts-node
将其编译为 .js
格式。
rspack.config.cjs
: 强制为 CommonJS
格式。
rspack.config.mjs
: 强制为 ES module
格式。
CommonJS
和 ES Module
的区别请参考 ES Module 和 CommonJS
配置类型检查
rspack.config.js
是一个 JavaScript 文件,你可以通过 JSDoc 来启用 IDE 的智能补全和 TypeScript 类型检查。
rspack.config.js
// @ts-check
/** @type {import('@rspack/cli').Configuration} */
const config = {
entry: {
main: './src/index.js',
module.exports = config;
你也可以使用 defineConfig
工具函数,它提供了针对配置的自动补全:
rspack.config.js
// @ts-check
const { defineConfig } = require('@rspack/cli');
const config = defineConfig({
entry: {
main: './src/index.js',
});
module.exports = config;
另外,你也可以使用 TypeScript 作为配置文件。默认的 TypeScript 配置文件名称是 rspack.config.ts
。
rspack.config.ts
import { Configuration } from '@rspack/cli';
const config: Configuration = {
entry: {
main: './src/index.js',
export = config;
你需要把 ts-node
安装为 devDependencies
,这样 Rspack 才能解析 ts
扩展。
package.json
{
"devDependencies": {
"ts-node": "^10.9.2"
如果你使用的 Node.js 版本支持 --experimental-transform-types 功能,那么可以使用 Node.js 内置的 TS 解析功能,而不需要安装 ts-node
package.json
{
"build": "NODE_OPTIONS=--experimental-transform-types rspack build"
注意,如果 JS 文件不存在,Rspack 将首先搜索 JavaScript,然后才是 TypeScript。
指定配置文件
Rspack 命令行支持通过 --config
选项来指定配置文件的名称。
例如,你需要在执行 build 时使用 rspack.prod.config.js
文件,可以在 package.json
中添加如下配置:
package.json
{
"scripts": {
"dev": "rspack serve",
"build": "rspack build --config rspack.prod.config.js"
你也可以将 --config
选项缩写为 -c
:
$ rspack build -c rspack.prod.config.js
导出配置函数
Rspack 支持在 rspack.config.js
中导出一个函数,你可以在函数中动态计算配置,并返回给 Rspack。
rspack.config.js
module.exports = function (env, argv) {
return {
devtool: env.production ? 'source-map' : 'eval',
从上述示例中可以看到,该函数接受两个入参:
第一个参数为 env
,对应运行 CLI 命令时 --env
选项的值。
第二个参数为 argv
,包含传递给 CLI 的所有选项。
判断当前环境
除了通过 env
参数,通过 process.env.NODE_ENV
来判断当前环境是更常见的方式:
rspack.config.js
module.exports = function (env, argv) {
const isProduction = process.env.NODE_ENV === 'production';
return {
devtool: isProduction ? 'source-map' : 'eval',
合并配置
你可以使用 webpack-merge
导出的 merge
函数来合并多个配置。
rspack.config.js
const { merge } = require('webpack-merge');
const base = {};
const dev = {
plugins: [new DevelopmentSpecifiedPlugin()],
module.exports =