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`	`字串`	"[name].css"	每個 CSS 輸出檔案的名稱，請參考 `output.filename`
`chunkFilename`	`字串`	"[name].css"	非同步載入的 CSS 檔案的名稱。如果未設定，它將使用 `filename`；請參考 `output.chunkFilename`
`ignoreOrder`	`布林值`	false	如果不同區塊中某些 CSS 的順序發生衝突時，是否發出警告。例如，entryA 引入 a.css 和 b.css，entryB 引入 b.css 和 a.css，則無法確定 a.css 和 b.css 的順序
`insert`	`字串 \| ((linkTag: HTMLLinkElement) => void)`	未定義	決定如何將 link 標籤插入頁面中。如果以字串類型傳遞，它將被視為 DOM 選擇器，並且 link 標籤將被插入到與該選擇器相對應的元素之後。如果以函式類型傳遞，該函式將在執行時轉換為字串以進行調用，並以 link 標籤作為參數
`attributes`	`Record<字串, 字串>`	未定義	為非同步 CSS 區塊的 `link` 標籤新增自訂屬性
`linkType`	`字串 \| 'text/css' \| false`	"text/css"	設定 link 標籤的 `type` 屬性值，以載入非同步 CSS 區塊
`runtime`	`布林值`	true	是否注入用於 CSS 載入的執行階段程式碼。如果停用，CSS 仍然會被提取，並且可以用於自訂載入方法
`pathinfo`	`布林值`	false	是否在 CSS 捆綁包中包含帶有更詳細路徑資訊的註解

載入器選項

CssExtractRspackPlugin.loader 的選項。

類型

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

名稱	類型	預設值	描述
`publicPath`	`字串 \| ((resourcePath: 字串, context: 字串) => 字串)`	output.publicPath	指定 CSS 內部外部資源（如圖像、檔案等）的自訂公開路徑
`emit`	`布林值`	true	如果為 true，則發出 CSS 檔案。如果為 false，則此外掛將提取 CSS 但不會發出檔案
`esModule`	`布林值`	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

範例

外掛選項

載入器選項

注意