CssExtractRspackPlugin#

Rspack 目前不兼容 mini-css-extract-plugin，但可以使用该插件替代，和 css-loader 搭配使用，将 CSS 提取成单独文件。

如果你的项目不依赖 css-loader，更推荐使用 Rspack 内置的 CSS 解决方案 experiments.css，性能更好。

• options

  • 类型：

  export interface PluginOptions {
    filename?: string;
    chunkFilename?: string;
    ignoreOrder?: boolean;
    insert?: string | ((linkTag: HTMLLinkElement) => void);
    attributes?: Record<string, string>;
    linkType?: string | 'text/css' | false;
    runtime?: boolean;
    pathinfo?: boolean;
  }
  
  export interface LoaderOptions {
    publicPath?: string | ((resourcePath: string, context: string) => string);
    emit?: boolean;
    esModule?: boolean;
  }

  plugin 配置

  名称	类型	默认值	描述
  filename	string	"[name].css"	css 产物的名字，请见 output.filename
  chunkFilename	string	"[name].css"	css 异步加载产物的名字，如果不设置则会使用 filename，请见 output.chunkFilename
  ignoreOrder	boolean	false	若某些 CSS 在不同 chunk 中顺序有冲突，是否发出警告。例如 entryA 引入 a.css b.css，entryB 引入 b.css a.css，a.css 和 b.css 的顺序无法确定
  insert	string | ((linkTag: HTMLLinkElement) => void)	undefined	决定 link 标签怎样插入到页面，如果传入 string 类型，则会视为 DOM 选择器，link 标签会插入到该选择器对应的元素后。如果传入 function 类型，则会将 function 转成字符串，在运行时进行调用，参数是 link 标签
  attributes	Record<string, string>	undefined	给 link 标签添加 attributes
  linkType	string | 'text/css' | false	"text/css"	设置 link 标签的 type
  runtime	boolean	true	是否注入 CSS 加载相关的 runtime 代码
  pathinfo	boolean	false	产物中是否保留更详细的 CSS 路径信息

  loader 配置

  名称	类型	默认值	描述
  publicPath	string | ((resourcePath: string, context: string) => string)	output.publicPath	css 模块中的 publicPath
  emit	boolean	true	是否提取出 CSS 文件，设置为 false 则不会产生 CSS 文件
  esModule	boolean	true	是否使用 es 模块语法进行 CSS Modules 类名导出

示例：

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

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