モジュール#

プロジェクト内の様々な種類のモジュールの処理方法を決定するために使用されます。

• 型: Object
• デフォルト: {}

module.defaultRules#

• 型: Rule[]

モジュールにデフォルトで適用されるルールの配列です。

詳細はソースコードを参照してください。

module.exports = {
  module: {
    defaultRules: [
      '...', // you can use "..." to reference those rules applied by webpack by default
    ],
  },
};

module.noParse#

• 型: string | string[] | RegExp | RegExp[] | ((request: string) => boolean)
• デフォルト: undefined

一致したモジュールのモジュール機構（例：module.exports、require、import）を現状のまま保持します。

外部依存関係のないライブラリを無視するために使用すると、ビルドのパフォーマンスを向上させるのに役立ちます。

注：これらのモジュールは、設定されたローダーによって処理されます。

module.exports = {
  module: {
    noParse: /typescript|watermark-dom/,
  },
};

module.exports = {
  module: {
    noParse: [require.resolve('typescript'), /watermark-dom/],
  },
};

module.exports = {
  module: {
    noParse: request => /typescript|watermark-dom/.test(request),
  },
};

module.parser#

• 型: Object
• デフォルト: {}

module.parserを使用して、すべてのパーサーのオプションを一元的に設定します。

module.exports = {
  module: {
    parser: {
      // Parser options for asset modules
      asset: {
        dataUrlCondition: {
          maxSize: 16192,
        },
      },
      // Parser options for javascript modules
      javascript: {
        dynamicImportMode: 'lazy',
        dynamicImportPrefetch: false,
        dynamicImportPreload: false,
        url: true,
        importMeta: true,
      },
      // Parser options for CSS modules
      css: {
        namedExports: true,
      },
      // Parser options for css/auto modules
      'css/auto': {
        namedExports: true,
      },
      // Parser options for css/module modules
      'css/module': {
        namedExports: true,
      },
    },
  },
};

module.parser.asset#

assetモジュールのパーサーオプションです。

module.parser.asset.dataUrlCondition#

• 型: { maxSize: number }
• デフォルト: { maxSize: 8096 }

モジュールのサイズがmaxSize以下の場合、モジュールはBase64でエンコードされます。それ以外の場合は、ファイルが作成されます。このオプションは、アセットモジュールシナリオでのみ使用できます。

module.exports = {
  module: {
    parser: {
      asset: {
        dataUrlCondition: {
          // Modules' size smaller than or equal to 4KB and ending with `.png` will be Base64 encoded.
          maxSize: 4 * 1024,
        },
      },
    },
  },
};

module.parser.javascript#

javascriptモジュールのパーサーオプションです。

module.parser.javascript.dynamicImportMode#

• 型: 'lazy' | 'eager' | 'weak' | 'lazy-once'
• デフォルト:'lazy'

動的インポートのグローバルモードを指定します。詳細はwebpackModeを参照してください。

module.parser.javascript.dynamicImportPrefetch#

• 型: boolean | number
• デフォルト:false

動的インポートに対するグローバルなプリフェッチを指定します。詳細はwebpackPrefetchを参照してください。

module.parser.javascript.dynamicImportPreload#

• 型: boolean | number
• デフォルト:false

動的インポートに対するグローバルなプリロードを指定します。詳細はwebpackPreloadを参照してください。

module.parser.javascript.dynamicImportFetchPriority#

• 型: 'low' | 'high' | 'auto'
• デフォルト:'auto'

動的インポートに対するグローバルなfetchPriorityを指定します。詳細はwebpackFetchPriorityを参照してください。

module.parser.javascript.url#

• 型: true | false | 'relative'
• デフォルト:true

new URL()構文の解析を有効にします。

'relative' を使用する場合、Rspack は new URL() 構文に対して相対 URL を生成します。つまり、結果の URL にはベース URL が含まれません。

<!-- with 'relative' -->
<img src="icon.svg" />

<!-- without 'relative' -->
<img src="file:///path/to/project/dist/icon.svg" />

module.parser.javascript.exprContextCritical#

• 型: boolean | undefined
• デフォルト:true

完全な動的依存関係 (import(variable)) に対する警告を有効にします。

module.parser.javascript.wrappedContextCritical#

• 型: boolean | undefined
• デフォルト:false

部分的な動的依存関係 (import("./path/to/" + variable)) に対する警告を有効にします。

module.parser.javascript.wrappedContextRegExp#

• 型: RegExp | undefined
• デフォルト:/.*/

ラップされた動的依存関係に一致する正規表現を設定します。

module.parser.javascript.importMeta#

• 型: boolean
• デフォルト:true

import.metaの評価を有効または無効にします。

module.parser.javascript.exportsPresence#

• 型: 'error' | 'warn' | 'auto' | false
• デフォルト:'auto'

存在しないエクスポートと競合する再エクスポートの使用について、警告またはエラーを発生させます。

• "error": エラーを報告します。
• "warn": 警告を報告します。
• "auto": モジュールが厳密なESMかどうかによって、厳密なESMの場合はエラー、それ以外の場合は警告を出力します。
• false: この機能を無効にします。

module.parser.javascript.importExportsPresence#

• 型: 'error' | 'warn' | 'auto' | false

存在しないエクスポートの使用について、警告またはエラーを発生させます。module.parser.javascript.exportsPresenceの設定をデフォルトとして使用します。

module.parser.javascript.reexportExportsPresence#

• 型: 'error' | 'warn' | 'auto' | false

競合する再エクスポートについて、警告またはエラーを発生させます。module.parser.javascript.exportsPresenceの設定をデフォルトとして使用します。

module.parser.javascript.strictExportPresence#

• 型: boolean

インポートされた名前がインポートされたモジュールに存在しない場合、警告ではなくエラーを出力します。

module.parser.javascript.worker#

• 型: string[] | boolean

Workerの解析のためのカスタム構文を提供します。一般的にWorkletのサポートに使用されます。

module.exports = {
  module: {
    parser: {
      javascript: {
        worker: [
          // Supports CSS paintWorklet
          'CSS.paintWorklet.addModule()',
          // Supports AudioWorklet, with the leading '*' indicating the recognition of a variable named 'context', for example:
          // let context = new AudioContext();
          // await context.audioWorklet.addModule(new URL("noise-processor.js", import.meta.url));
          '*context.audioWorklet.addModule()',
          // Extends default syntax: ["Worker", "SharedWorker", "navigator.serviceWorker.register()", "Worker from worker_threads"]
          '...',
        ],
      },
    },
  },
};

module.parser.javascript.overrideStrict#

• 型: 'strict' | 'non-strict'

モジュールを厳密モードまたは非厳密モードに上書きします。

これによりモジュールの動作に影響を与える可能性があります（厳密モードと非厳密モードでは動作が異なる場合があります）。そのため、このオプションは慎重に設定してください。

module.parser["javascript/auto"]#

javascript/autoモジュールのパーサーオプションです。javascriptパーサーオプションと同じです。

module.parser["javascript/dynamic"]#

javascript/dynamicモジュールのパーサーオプションです。javascriptパーサーオプションと同じです。

module.parser["javascript/esm"]#

javascript/esmモジュールのパーサーオプションです。javascriptパーサーオプションと同じです。

module.parser["css/auto"]#

css/autoモジュールのパーサーオプションです。

module.parser["css/auto"].namedExports#

• 型: boolean
• デフォルト: true

CSSエクスポートにESモジュールの名前付きエクスポートを使用します。

namedExports: trueを使用する場合、名前空間エクスポートまたは名前付きエクスポートを使用できます。

// namespace export
import * as classes from './index.module.css';
// named export
import { class1, class2 } from './index.module.css';

namedExports: falseを使用する場合、名前空間エクスポートと名前付きエクスポートに加えて、デフォルトエクスポートも使用できます。

// namespace export
import * as classes from './index.module.css';
// named export
import { class1, class2 } from './index.module.css';
// default export
import classes from './index.module.css';
// default export and named export
import classes, { class1, class2 } from './index.module.css';

module.parser.css#

cssモジュールのパーサーオプションです。

module.parser.css.namedExports#

module.parser["css/auto"].namedExportsと同じです。

module.parser["css/module"]#

css/moduleモジュールのパーサーオプションです。

module.parser["css/module"].namedExports#

module.parser["css/auto"].namedExportsと同じです。

module.generator#

• 型: Object
• デフォルト: {}

module.generatorを使用して、すべてのジェネレーターのオプションを1か所で設定します。

module.exports = {
  module: {
    generator: {
      // Generator options for asset modules
      asset: {
        dataUrl: {
          encoding: false,
          mimetype: 'base64',
        },
        filename: '[name]-[contenthash][ext]',
        publicPath: 'https://cdn.example.com/',
      },
      // Generator options for asset/inline modules
      'asset/inline': {
        dataUrl: {
          encoding: false,
          mimetype: 'base64',
        },
      },
      // Generator options for asset/resource modules
      'asset/resource': {
        filename: '[name]-[contenthash][ext]',
        publicPath: 'https://cdn.example.com/',
      },
      // Generator options for css/auto modules
      'css/auto': {
        exportsConvention: 'as-is',
        exportsOnly: false,
        localIdentName: '[uniqueName]-[id]-[local]',
        esModule: true,
      },
      // Generator options for `css` modules
      css: {
        exportsOnly: false,
        esModule: true,
      },
      // Generator options for css/module modules
      'css/module': {
        exportsConvention: 'as-is',
        exportsOnly: false,
        localIdentName: '[uniqueName]-[id]-[local]',
        esModule: true,
      },
    },
  },
};

module.generator.asset#

assetモジュールのジェネレーターオプションです。

module.generator.asset.dataUrl#

• 型: Object | (options: { content: string, filename: string }) => string
• デフォルト: {}

モジュールタイプが'asset'または'asset/inline'のモジュールに対してのみ有効です。

module.exports = {
  module: {
    generator: {
      asset: {
        dataUrl: {
          encoding: 'base64',
          mimetype: 'mimetype/png',
        },
      },
    },
  },
};

関数の場合は、各モジュールに対して実行され、data URI文字列を返す必要があります。

module.exports = {
  //...
  module: {
    generator: {
      asset: {
        dataUrl: ({ content }) => {
          const svgToMiniDataURI = require('mini-svg-data-uri');
          return svgToMiniDataURI(content);
        },
      },
    },
  },
};

module.generator.asset.dataUrl.encoding#

• 型: false | 'base64'
• デフォルト: 'base64'

'base64'に設定すると、モジュールソースはBase64アルゴリズムを使用してエンコードされます。encodingをfalseに設定すると、エンコーディングが無効になります。モジュールタイプが'asset'または'asset/inline'のモジュールに対してのみ有効です。

module.generator.asset.dataUrl.mimetype#

• 型: string
• デフォルト: require('mime-types').lookup(ext)

data URIのmimetypeです。デフォルトではモジュールリソースの拡張子から解決されます。モジュールタイプが'asset'または'asset/inline'のモジュールに対してのみ有効です。

module.generator.asset.filename#

• 型: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
• デフォルト: undefined
• サポートされるテンプレート文字列： output.assetModuleFilenameを参照してください。

output.assetModuleFilenameと同じです。output.assetModuleFilenameを上書きし、assetとasset/resourceモジュールタイプに対してのみ機能します。

module.exports = {
  module: {
    generator: {
      asset: {
        filename: 'static/[hash][ext]',
      },
    },
  },
};

module.generator.asset.publicPath#

• 型: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
• デフォルト: undefined

output.publicPathを上書きします。モジュールタイプが'asset'または'asset/resource'のモジュールに対してのみ有効です。

module.exports = {
  module: {
    generator: {
      asset: {
        publicPath: 'https://cdn.example.com/',
      },
    },
  },
};

module.generator.asset.emit#

• 型: boolean
• デフォルト: true

アセットをディスクに出力するかどうかを指定します。SSRなどのシナリオでは、不要なファイルの出力を避けるために、このオプションをfalseに設定できます。

モジュールタイプが'asset'または'asset/resource'のモジュールに対してのみ有効です。

• 'asset':

module.exports = {
  module: {
    generator: {
      asset: {
        emit: false,
      },
    },
  },
};

• 'asset/resource':

module.exports = {
  module: {
    generator: {
      'asset/resource': {
        emit: false,
      },
    },
  },
};

module.generator["asset/inline"]#

asset/inlineモジュールのジェネレーターオプションです。

module.generator["asset/inline"].dataUrl#

module.generator["asset"].dataUrlと同じです。

module.generator["asset/inline"].dataUrl.encoding#

module.generator["asset"].dataUrl.encodingと同じです。

module.generator["asset/inline"].dataUrl.mimetype#

module.generator["asset"].dataUrl.mimetypeと同じです。

module.generator["asset/resource"]#

asset/resourceモジュールのジェネレーターオプションです。

module.generator["asset/resource"].filename#

module.generator["asset"].filenameと同じです。

module.generator["asset/resource"].publicPath#

module.generator["asset"].publicPathと同じです。

module.generator["css/auto"]#

css/autoモジュールのジェネレーターオプションです。

module.generator["css/auto"].exportsConvention#

• 型: 'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only'
• デフォルト: 'as-is'

CSSエクスポート名がJavaScriptモジュールにどのようにエクスポートされるかをカスタマイズします（そのまま保持する、キャメルケースに変換するなど）。

module.generator["css/auto"].exportsOnly#

• 型: boolean
• デフォルト: ノード環境ではtrue、ウェブ環境ではfalse。

trueの場合、識別子マッピングのみをCSSから出力JavaScriptファイルにエクスポートし、テンプレートにスタイルシートを埋め込みません。CSS Modulesをプリレンダリング（例：SSR）で使用する場合に便利です。

falseの場合、スタイルシートを生成し、テンプレートに埋め込みます。

module.generator["css/auto"].localIdentName#

• 型: string
• デフォルト: [uniqueName]-[id]-[local]

ファイルレベルおよびモジュールレベルでの置換に加えて、CSSモジュールに対して生成されるローカルクラス名のフォーマットをカスタマイズします。[uniqueName]と[local]も含まれます。

module.generator["css/auto"].esModule#

• 型: boolean
• デフォルト: true

この設定は、ESM-CJSの相互運用性を向上させるために利用できます。

CSSのエクスポートに__esModuleを追加するかどうかを指定します。追加した場合、esm-cjsの相互運用時にはESモジュールとして扱われ、追加しない場合はCommonJSモジュールとして扱われます。

例えば、サードパーティのコンポーネントライブラリからCommonJS出力を利用する場合、正しいエクスポートを取得するために、この設定を追加して正しいesm-cjsの相互運用性を確保することが必要な場合があります（これはRule.testやその他のマッチング条件と組み合わせて、特定のコンポーネントライブラリにのみ適用できます）。

サードパーティ製コンポーネントライブラリの元のソースコード

import style from './style.css';

export function Button() {
  return <button className={style.btn}></button>;
}

サードパーティ製コンポーネントライブラリによって公開されたCommonJS形式の出力

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.Button = Button;
var _style = _interopRequireDefault(require('./style.css'));
var _jsxRuntime = require('react/jsx-runtime');
function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}
function Button() {
  return /*#__PURE__*/ (0, _jsxRuntime.jsx)('button', {
    className: _style['default'].btn, // <-- Note: After passing through _interopRequireDefault, this need to access default here.
  });
}

module.generator.css#

cssモジュールのジェネレータオプション。

module.generator.css.exportsOnly#

module.generator["css/auto"].exportsOnlyと同じです。

module.generator.css.esModule#

module.generator["css/auto"].esModuleと同じです。

module.generator["css/module"]#

css/moduleモジュールのジェネレータオプション。

module.generator["css/module"].exportsConvention#

module.generator["css/auto"].exportsConventionと同じです。

module.generator["css/module"].exportsOnly#

module.generator["css/auto"].exportsOnlyと同じです。

module.generator["css/module"].localIdentName#

module.generator["css/auto"].localIdentNameと同じです。

module.generator["css/module"].esModule#

module.generator["css/auto"].esModuleと同じです。

module.rules#

• 型: Rule[]
• デフォルト: []

モジュールが作成されるときに、モジュールのリクエストと一致するルールの配列です。これらのルールは、モジュールの作成動作を変更できます。ローダーなどをモジュールに適用できます。

Rule#

• 型: Rule
• デフォルト: {}

Ruleは、モジュールの一致条件と、それらのモジュールの処理動作を定義します。

Ruleの動作

対応する一致モジュールの処理動作を定義します。例：

• これらのモジュールにローダーのリストを適用する（Rule.use）
• モジュールの型を適用する（Rule.type）
• モジュールの解決設定を適用する（Rule.resolve）

Condition#

• 型: string | RegExp | Condition[] | LogicalConditions

モジュールの一致条件を定義します。一般的な一致は、resource、resourceQuery、include、excludeです。

例：app.jsが./image.png?inline#fooをインポートする

• resourceは/path/to/image.pngであり、Rule.resource Conditionと照合されます。
• resourceQueryは?inlineであり、Rule.resourceQuery Conditionと照合されます。
• resourceFragmentは#fooであり、Rule.resourceFragment Conditionと照合されます。

Conditionは、指定された入力との照合形式を表し、次の型をサポートします。

• String: 指定された入力に対し、入力文字列がstartsWithを満たす場合、一致は成功します。注：input.startsWith(condition)と考えることができます。
• RegExp: 指定された入力に対し、入力文字列が正規表現を満たす場合、一致は成功します。注：condition.test(input)と考えることができます。
• Condition[]: 条件のリスト。少なくとも1つのConditionが一致する必要があります。
• LogicalConditions: すべてのConditionが一致する必要があります。
  • { and: Condition[] }: すべてのConditionが一致する必要があります。
  • { or: Condition[] }: 少なくとも1つのConditionが一致する必要があります。
  • { not: Condition }: すべてのConditionが一致しては**なりません**。
• (value: string) => boolean: 入力値で呼び出され、真の値を返す場合、一致は成功します。

ネストされたRule#

ネストされたRuleは、Rule.rulesおよびRule.oneOfのプロパティの下に指定できます。これらのルールは、親Ruleの条件が一致した場合にのみ評価されます。各ネストされたルールには、独自の条件を含めることができます。

評価の順序は次のとおりです。

1. 親Rule
2. Rule.rules
3. Rule.oneOf

Rule.exclude#

• 型: Condition
• デフォルト: undefined

この条件に一致するすべてのモジュールを除外します。リソースの絶対パス（クエリとフラグメントを除く）に対して照合されます。このオプションは、Rule.resourceと同時に存在できません。

Rule.include#

• 型: Condition
• デフォルト: undefined

リソースの絶対パス（クエリとフラグメントを除く）に対して、この条件に一致するすべてのモジュールに一致します。このオプションは、Rule.resourceと同時に存在できません。

Rule.resource#

• 型: Condition
• デフォルト: undefined

このリソースに一致するすべてのモジュールに一致します。リソース（クエリとフラグメントを除く絶対パス）に対して照合されます。このオプションは、Rule.testと同時に存在できません。

Rule.resourceQuery#

• 型: Condition
• デフォルト: undefined

リソースのクエリに対してこのリソースに一致するすべてのモジュールに一致します。注：?を含みます。Rule.resourceQueryが?rawの場合、foo?rawのリソースリクエストと一致します。

Rule.resourceFragment#

• 型: Condition
• デフォルト: undefined

リソースのフラグメントに対してこのリソースに一致するすべてのモジュールに一致します。注：#を含みます。Rule.resourceFragmentが#abcの場合、foo#abcのリソースリクエストと一致します。

Rule.test#

• 型: Condition
• デフォルト: undefined

このリソースに一致するすべてのモジュールに一致します。リソース（クエリとフラグメントを除く絶対パス）に対して照合されます。このオプションは、Rule.resourceと同時に存在できません。

Rule.issuer#

• 型: Condition
• デフォルト: undefined

現在のモジュールを発行したモジュールのリソース（クエリとフラグメントを除く絶対パス）に対してこのリソースに一致するすべてのモジュールに一致します。

Rule.issuerLayer#

• 型: string
• デフォルト: undefined

現在のモジュールを発行したモジュールのレイヤーに対して、このリソースに一致するすべてのモジュールに一致します。

基本的な例

module.exports = {
  module: {
    rules: [
      {
        issuerLayer: 'other-layer',
      },
    ],
  },
};

より複雑な例としては、entryオプションと組み合わせて、モダンバンドルとレガシーバンドルを同時にビルドすることが挙げられます。

module.exports = {
  entry: {
    index: {
      import: './src/index.js',
      layer: 'modern',
    },
    'index-legacy': {
      import: './src/index.js',
      layer: 'legacy',
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        issuerLayer: 'modern',
        options: {
          env: { targets: ['chrome >= 100'] },
        },
      },
      {
        test: /\.js$/,
        issuerLayer: 'legacy',
        options: {
          env: { targets: ['ie >= 11'] },
        },
      },
    ],
  },
  experiments: {
    layers: true,
  },
};

Rule.dependency#

• 型: Condition
• デフォルト: undefined

現在のモジュールを導入した依存関係のカテゴリに一致するすべてのモジュールに一致します。例えば、importおよびimport()の場合はesm、require()の場合はcjs、new URL()およびurl()の場合はurlなどです。

Rule.scheme#

• 型: Condition
• デフォルト: undefined

リソースのスキームに対してこのリソースに一致するすべてのモジュールに一致します。

例えば、次の設定を使用して、インラインデータuriリソースを別個のリソースとして扱うことができます。

module.exports = {
  module: {
    rules: [
      {
        scheme: 'data',
        type: 'asset/resource',
      },
    ],
  },
};

Rule.mimetype#

• 型: Condition
• デフォルト: undefined

リソースのmimetypeに対してこのリソースに一致するすべてのモジュールに一致します。

Rule.descriptionData#

• 型: { [key: string]: Condition }
• デフォルト: undefined

descriptionDataオプションを使用すると、通常はpackage.jsonである説明ファイルのプロパティの値と照合して、どのモジュールにルールを適用するかを決定できます。これは、package.jsonにあるメタデータに基づいて特定のモジュールにルールを適用するのに便利な方法です。

descriptionDataのオブジェクトキーは、モジュールのpackage.jsonのキー（name、versionなど）に対応します。各キーには、package.jsonデータと照合するためのConditionを関連付ける必要があります。

例えば、以下では、package.jsonのnameに'rspack'文字列が含まれているJavaScriptリソースのみにルールを適用しています。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: /node_modules/,
        descriptionData: {
          name: packageJsonName => packageJsonName.includes('rspack'),
        },
        // additional rule options...
      },
    ],
  },
};

Rule.with#

• 型: { [key: string]: Condition }
• デフォルト: undefined

withは、import属性と組み合わせて使用できます。

例えば、以下の設定は{ type: "url" }に一致し、一致したモジュールのtypeを"asset/resource"に変更します。

module.exports = {
  module: {
    rules: [
      {
        with: { type: 'url' },
        type: 'asset/resource',
      },
    ],
  },
};

以下のインポートは一致するでしょう。

import url from './data' with { type: 'url' };
import('./data', { with: { type: 'url' } });

builtin:swc-loaderを使用する場合、Rspackがwith構文に正しくマッチするために、インポート属性を保持するためにkeepImportAttributes設定を手動で有効にする必要があることに注意してください。

module.exports = {
  module: {
    rules: [
      {
        with: { type: 'url' },
        type: 'asset/resource',
      },
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            experimental: {
+             keepImportAttributes: true,
            },
            parser: {
              syntax: 'typescript',
            },
          },
        },
        type: 'javascript/auto',
      },
    ],
  },
};

Rule.loaders#

Rule.loader#

Rule.loaderはRule.use: [ { loader } ]のショートカットです。Rule.useの詳細をご覧ください。

Rule.options#

Rule.optionsはRule.use: [ { options } ]のショートカットです。Rule.useの詳細をご覧ください。

Rule.parser#

• 型: Object
• デフォルト: {}

ルール条件に一致した特定のモジュールのパーサーオプションです。これはmodule.parserのパーサーオプションをオーバーライドします。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css/,
        parser: {
          namedExports: false,
        },
        type: 'css/module',
      },
    ],
  },
};

特定のパーサーオプションと対応するモジュールタイプについては、module.parserを参照してください。

Rule.generator#

• 型: Object
• デフォルト: {}

ルール条件に一致した特定のモジュールのジェネレーターオプションです。これはmodule.generatorのパーサーオプションをオーバーライドします。

module.exports = {
  module: {
    rules: [
      {
        test: /\.png/,
        generator: {
          filename: '[contenthash][ext]',
        },
        type: 'asset',
      },
    ],
  },
};

特定のジェネレーターオプションと対応するモジュールタイプについては、module.generatorを参照してください。

Rule.sideEffects#

• 型: boolean

モジュールに副作用があることをマークします。

Rule.enforce#

• 型: 'pre' | 'post'

ローダーのカテゴリを指定します。

'pre'を指定すると、ローダーは他のすべてのローダーの前に実行されます。

'post'を指定すると、ローダーは他のすべてのローダーの後で実行されます。

Rule.type#

• 型: 'javascript/auto' | 'typescript' | 'css' | 'css/module' | 'css/auto' | 'json' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline'

一致したモジュールの型をマークするために使用され、モジュールがRspackの組み込み処理によってどのように処理されるかに影響します。例えば、モジュールが'typescript'としてマークされると、モジュールはTSパーサー/ジェネレーターを使用して処理されます。

• 'javascript/auto': JavaScriptモジュール、サポートされるモジュールシステム: CommonJS、ESM、現時点ではAMDモジュールサポートの予定はありません。
• 'javascript/esm'：ESモジュールとして扱われるJavaScriptモジュール。
• 'javascript/dynamic'：スクリプトとして扱われるJavaScriptモジュール。
• 'css': CSSモジュール
• 'css/module': CSS Modulesモジュール
• 'css/auto': ファイル名が/\.module(s)?\.[^.]+$/に一致する場合はCSS Modulesモジュール、そうでない場合はCSSモジュール
• 'json': JSONデータモジュール
• 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline': Asset Moduleを参照してください。

Rule.layer#

• 型: string

一致したモジュールのレイヤーをマークするために使用されます。モジュールのグループは1つのレイヤーにまとめることができ、その後、分割チャンク、統計、またはエントリオプションで使用できます。

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        layer: 'layer-name',
      },
    ],
  },
};

Rule.use#

• 型

export type RuleSetUse =
  | RuleSetUseItem[]
  | RuleSetUseItem
  | ((ctx: RawFuncUseCtx) => RuleSetUseItem[]);
export type RuleSetUseItem =
  | { loader: string; options: Record<string, any> }
  | string;
export interface RawFuncUseCtx {
  resource?: string;
  realResource?: string;
  resourceQuery?: string;
  issuer?: string;
}

ローダーのパッケージ名とそのオプションを渡す配列。string[] 例: use: ['svgr-loader']はuse: [ { loader: 'svgr-loader' } ]の略記です。ローダーは右から左の順序で実行されます。

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        use: [
          'svgr-loader',
          {
            loader: 'svgo-loader',
            options: {
              configFile: false,
            },
          },
        ],
      },
    ],
  },
};

関数を使用することもできます。

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset',
        use: info => ({
          loader: 'svgo-loader',
          options: {
            plugins: [
              {
                cleanupIDs: { prefix: basename(info.resource) },
              },
            ],
          },
        }),
      },
    ],
  },
};

Rule.resolve#

一致したモジュールに基づいて、特定のモジュール解決オプションを設定します。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        resolve: {
          preferRelative: true,
        },
      },
    ],
  },
};

Rule.rules#

• 型: Rule[]
• デフォルト: undefined

一種のネストされたルールであり、親ルールが一致した場合にも使用されるルールの配列です。

Rule.oneOf#

• 型: Rule[]
• デフォルト: undefined

一種のネストされたルールであり、親ルールが一致した場合、最初に一致したルールのみが使用されるルールの配列です。