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 モジュールで CSS Modules クラス名のエクスポートに ES モジュール構文を使用するかどうか。

注意

組み込みの CSS サポート (experiments.css) を有効にすると、.css で終わるファイルは自動的に css/auto モジュールとして扱われることに注意してください。このプラグインを使用する場合は、CssExtractRspackPlugin.loader が設定されたルール型が、デフォルトの css/auto ではなく、すべて javascript/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

例

プラグインオプション

ローダーオプション

注意