CssExtractRspackPlugin

Rspack 仅

Rspack 目前与 mini-css-extract-plugin 不兼容，但你可以使用 CssExtractRspackPlugin 作为替代。它可以与 css-loader 一起使用，将 CSS 提取到单独的文件中。

如果你的项目不依赖于 css-loader 和 mini-css-extract-plugin，建议使用 Rspack 内置的 CSS 解决方案 experiments.css，它可以提供更好的性能。

示例

使用 CssExtractRspackPlugin 时，你需要在 plugins 部分注册插件，并在 module.rules 中注册 CssExtractRspackPlugin.loader。

rspack.config.js

const rspack = require('@rspack/core');

module.exports = {
  plugins: [new rspack.CssExtractRspackPlugin({})],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],
        type: 'javascript/auto',
      },
    ],
  },
};

插件选项

CssExtractRspackPlugin 的选项。

类型

interface PluginOptions {
  filename?: string | ((pathData: PathData, assetInfo?: AssetInfo) => string);
  chunkFilename?:
    | string
    | ((pathData: PathData, assetInfo?: AssetInfo) => string);
  ignoreOrder?: boolean;
  insert?: string | ((linkTag: HTMLLinkElement) => void);
  attributes?: Record<string, string>;
  linkType?: string | 'text/css' | false;
  runtime?: boolean;
  pathinfo?: boolean;
}

名称	类型	默认值	描述
`filename`	`string`	"[name].css"	每个 CSS 输出文件的名称，请参考 `output.filename`
`chunkFilename`	`string`	"[name].css"	异步加载的 CSS 文件的名称。如果未设置，将使用 `filename`；请参考 `output.chunkFilename`
`ignoreOrder`	`boolean`	false	是否在不同块中某些 CSS 顺序冲突时发出警告。例如，entryA 引入 a.css 和 b.css，entryB 引入 b.css 和 a.css，无法确定 a.css 和 b.css 的顺序
`insert`	`string \| ((linkTag: HTMLLinkElement) => void)`	undefined	决定如何将链接标签插入页面。如果传递字符串类型，将视为 DOM 选择器，链接标签将插入到与该选择器相对应的元素之后。如果传递函数类型，该函数将在运行时被转换为字符串以供调用，并将链接标签作为参数
`attributes`	`Record<string, string>`	undefined	为异步 CSS 块的 `link` 标签添加自定义属性
`linkType`	`string \| 'text/css' \| false`	"text/css"	为加载异步 CSS 块的链接标签设置 `type` 属性的值
`runtime`	`boolean`	true	是否注入 CSS 加载的运行时代码。如果禁用，CSS 仍然会被提取，并且可以用于自定义加载方法
`pathinfo`	`boolean`	false	是否在 CSS 包中包含更详细的路径信息的注释

加载器选项

CssExtractRspackPlugin.loader 的选项。

类型

interface LoaderOptions {
  publicPath?: string | ((resourcePath: string, context: string) => string);
  emit?: boolean;
  esModule?: boolean;
}

名称	类型	默认值	描述
`publicPath`	`string \| ((resourcePath: string, context: string) => string)`	output.publicPath	为 CSS 内部的外部资源（如图像、文件等）指定自定义公共路径
`emit`	`boolean`	true	如果为 true，则发出 CSS 文件。如果为 false，插件将提取 CSS 但不会发出文件
`esModule`	`boolean`	true	是否在生成的 JavaScript 模块中使用 ES 模块语法导出 CSS 模块类名

注意

请注意，在启用内置 CSS 支持 (experiments.css) 时，以 .css 结尾的文件将自动被视为 css/auto 模块。如果你想使用此插件，请确保设置了 CssExtractRspackPlugin.loader 的规则类型都被 javascript/auto 覆盖，而不是默认的 css/auto。

例如

rspack.config.js

const rspack = require('@rspack/core');

module.exports = {
  plugins: [new rspack.CssExtractRspackPlugin({})],
  module: {
    rules: [
      {
        test: /src\/legacy-project\/.*\.css$/,
        type: 'javascript/auto', // Cover the default CSS module type and treat it as a regular JS file.
        use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'],
      },
      {
        test: /src\/new-project\/.*\.css$/,
        type: 'css/auto', // Handle with built-in CSS
      },
    ],
  },
  experiments: {
    css: true,
  },
};

本页内容

CssExtractRspackPlugin#

示例#

插件选项#

加载器选项#

注意#

CssExtractRspackPlugin

示例

插件选项

加载器选项

注意