close
指南
配置
插件
API
社区
版本
指南
配置
插件
API
社区
简体中文

output.sourceMap

  • 类型：
type SourceMap =
  | boolean
  | {
      js?: Rspack.Configuration['devtool'];
      css?: boolean;
    };
  • 默认值：
const defaultSourceMap = {
  js: mode === 'development' ? 'cheap-module-source-map' : false,
  css: false,
};

用于设置是否生成 source map 文件，以及生成哪一种格式的 source map。

什么是 source map

source map 是保存源代码映射关系的信息文件，它记录了编译后的代码的每一个位置，以及所对应的编译前的位置。通过 source map，可以在调试编译后的代码时，直接查看对应的源代码。

默认行为

默认情况下，Rsbuild 的 source map 生成规则如下：

  • 在开发模式构建时，会生成 JS 文件的 source map，便于进行开发调试；不会生成 CSS 文件的 source map。
  • 在生产模式构建时，不会生成 JS 和 CSS 文件的 source map，以提供最佳的构建性能。

布尔值

如果 output.sourceMap 为 true，则会根据 mode 生成 JS 和 CSS 文件的 source map，等价于：

export default {
  output: {
    sourceMap: {
      js: mode === 'development' ? 'cheap-module-source-map' : 'source-map',
      css: true,
    },
  },
};

如果 output.sourceMap 为 false，则不会生成 JS 和 CSS 文件的 source map，等价于：

export default {
  output: {
    sourceMap: {
      js: false,
      css: false,
    },
  },
};

JS source map

JS 文件的 source map 通过 sourceMap.js 来控制，可以传入 Rspack devtool 选项支持的所有 source map 格式，设置为 false 为关闭。

比如，如果你需要在所有模式生成高质量的 source map，可以设置为：

export default {
  output: {
    sourceMap: {
      js: 'source-map',
    },
  },
};

你也可以根据 NODE_ENV 来设置不同的 source map 格式：

export default {
  output: {
    sourceMap: {
      js:
        process.env.NODE_ENV === 'production'
          ? // 生产模式使用高质量的 source map 格式
            'source-map'
          : // 开发模式使用性能更好的 source map 格式
            'cheap-module-source-map',
    },
  },
};

CSS source map

CSS 文件的 source map 通过 sourceMap.css 来控制，设置为 true 为开启，设置为 false 为关闭。

比如，如果需要生成 CSS 文件的 source map，可以设置为：

export default {
  output: {
    sourceMap: {
      css: true,
    },
  },
};

在生产构建时，我们不推荐同时开启 output.injectStyles 和 output.sourceMap.css，因为 output.injectStyles 会将 source map 注入到 JS 文件中，这会增加文件的体积并导致页面加载变慢。

你可以仅在开发模式下开启 CSS 文件的 source map：

export default {
  output: {
    injectStyles: true,
    sourceMap: {
      css: process.env.NODE_ENV === 'development',
    },
  },
};