CssExtractRspackPlugin

Added in v0.6.0Rspack only

Rspack currently does not support mini-css-extract-plugin, but it can be replaced with this plugin and used in conjunction with css-loader to extract CSS into separate files.

If your project does not depend on css-loader, it is recommended to use the built-in CSS solution experiments.css of Rspack for better performance.

  • options

    • Types:
    export 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;
    }
    
    export interface LoaderOptions {
      publicPath?: string | ((resourcePath: string, context: string) => string);
      emit?: boolean;
      esModule?: boolean;
    }

    Plugin Configuration

    NameTypeDefault ValueDescription
    filenamestring"[name].css"The name of the CSS artifact, please refer to output.filename
    chunkFilenamestring"[name].css"The name of the asynchronous loading CSS artifact. If not set, it will use filename; please see output.chunkFilename
    ignoreOrderbooleanfalseWhether to issue a warning if there are conflicts in the order of some CSS in different chunks. For example, entryA introduces a.css b.css, entryB introduces b.css a.css, and the order of a.css and b.css cannot be determined
    insertstring | ((linkTag: HTMLLinkElement) => void)undefinedDecide how the link tag is inserted into the page. If passed as a string type, it will be regarded as DOM selector, and the link tag will be inserted after element corresponding to that selector. If passed as function type, the function will be converted into a String at runtime for invocation, with link tag as parameter
    attributesRecord<string, string>undefinedAdd attributes to link tags
    linkTypestring | 'text/css' | false"text/css"Set the Type attribute value for Link Tag
    runtimebooleantrueInjecting Runtime code related to CSS Loading
    pathinfobooleanfalseWhether more detailed information about CSS Path should remain in product

    Loader Configuration

    NameTypeDefault ValueDescription
    publicPathstring | ((resourcePath: string, context: string) => string)output.publicPathPublic Path in CSS Module
    emitbooleantrueWhether Extracting Out CSS Files Setting It To False Will Not Generate CSS Files
    esModulebooleantrueWhether To Use Es Module Syntax For Exporting Class Names Of CSS Modules

Example:

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',
      },
    ],
  },
};
INFO

Please note when opening built-in CSS support. (experiments.css), Files ending with .css will be automatically treated as css/auto modules. If you want to use this plugin, make sure that the rule types with CssExtractRspackPlugin.loader set are all overridden by javascript/auto instead of the default css/auto.

For example:

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,
  },
};