配置 Rspack#

Rspack 提供与 webpack 相似的配置。本章将向您展示如何使用 Rspack 配置。

配置文件#

当您运行 Rspack CLI 时，Rspack 会自动读取当前工作目录中的 rspack.config.js 文件。

一个基本的 Rspack 配置文件如下所示

module.exports = {
  entry: {
    main: './src/index.js',
  },
};

配置文件格式#

Rspack 支持四种类型的配置文件，.js、.ts、.cjs 和 .mjs 格式。

• rspack.config.js：默认为 CommonJS 格式，如果 package.json 的类型为 module，则为 ES 模块 格式。
• rspack.config.ts：TypeScript 格式，使用 ts-node 在内部编译为 .js 格式。
• rspack.config.cjs：强制使用 CommonJS 格式。
• rspack.config.mjs：强制使用 ES 模块 格式。

查看 ES 模块 和 CommonJS 了解 CommonJS 和 ES 模块 之间的区别。

类型检查#

rspack.config.js 是一个 JavaScript 文件，您可以使用 JSDoc 启用 IDE 的 Intellisense 和 TypeScript 类型检查。

// @ts-check

/** @type {import('@rspack/cli').Configuration} */
const config = {
  entry: {
    main: './src/index.js',
  },
};
module.exports = config;

或者，您可以使用 defineConfig 帮助器，它提供了配置的自动完成功能

// @ts-check

const { defineConfig } = require('@rspack/cli');

const config = defineConfig({
  entry: {
    main: './src/index.js',
  },
});
module.exports = config;

或者，您可以使用 TypeScript 作为配置文件。默认的 TypeScript 配置文件名是 rspack.config.ts。

import { Configuration } from '@rspack/cli';

const config: Configuration = {
  entry: {
    main: './src/index.js',
  },
};

export = config;

您需要将 ts-node 安装为 devDependencies，以便 Rspack 可以解析 ts 扩展名。

{
  "devDependencies": {
    "ts-node": "^10.9.2"
  }
}

如果您使用的 Node.js 版本支持 --experimental-transform-types 标志，则可以使用 Node.js 的内置 TS 转换，而无需安装 ts-node。

{
  "build": "NODE_OPTIONS=--experimental-transform-types rspack build"
}

请注意，如果 JS 文件不存在，Rspack 将首先搜索 JavaScript，然后搜索 TypeScript。

指定配置文件#

您可以使用 --config 选项指定配置文件的名称。

例如，如果您需要在运行构建时使用 rspack.prod.config.js 文件，您可以将以下脚本添加到 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。

module.exports = function (env, argv) {
  return {
    devtool: env.production ? 'source-map' : 'eval',
  };
};

从上面的示例中可以看出，该函数接受两个输入参数

• 第一个参数是 env，它对应于运行 CLI 命令时 --env 选项的值。
• 第二个参数是 argv，它包含传递给 CLI 的所有选项。

确定当前环境#

除了传递 env 参数之外，使用 process.env.NODE_ENV 来确定当前环境更为常见

module.exports = function (env, argv) {
  const isProduction = process.env.NODE_ENV === 'production';
  return {
    devtool: isProduction ? 'source-map' : 'eval',
  };
};

合并配置#

您可以使用 webpack-merge 导出的 merge 函数来合并多个配置。

const { merge } = require('webpack-merge');

const base = {};

const dev = {
  plugins: [new DevelopmentSpecifiedPlugin()],
};

module.exports =
  process.env.NODE_ENV === 'development' ? merge(base, dev) : base;

有关 merge 的更多信息，请参阅 webpack-merge 文档。