モジュール

これらのオプションは、プロジェクト内の異なる種類のモジュールがどのように扱われるかを決定します。

module.defaultRules

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

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

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

webpack 5.87.0 以降、特定のルールを条件付きで無効にするために、module.defaultRules に 0、""、false、null、undefined などの falsy な値を渡すことが許可されています。

module.exports = {
  module: {
    defaultRules: [
      false &&
        {
          // this rule will be disabled
        },
    ],
  },
};

module.generator

5.12.0+

module.generator を使用すると、すべてのジェネレーターのオプションを1か所で構成できます。

webpack.config.js

module.exports = {
  module: {
    generator: {
      asset: {
        // Generator options for asset modules

        // The options for data url generator.
        dataUrl: {
          // Asset encoding (defaults to "base64")
          // type: 'base64' | false
          encoding: 'base64',
          // Asset mimetype (getting from file extension by default).
          // type: string
          mimetype: 'image/png',
        },

        // Emit an output asset from this asset module. This can be set to 'false' to omit emitting e. g. for SSR.
        // type: boolean
        emit: true,

        // Customize filename for this asset module
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        filename: 'static/[path][name][ext]',

        // Customize publicPath for asset modules, available since webpack 5.28.0
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        publicPath: 'https://cdn/assets/',

        // Emit the asset in the specified folder relative to 'output.path', available since webpack 5.67.0
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        outputPath: 'cdn-assets/',
      },
      'asset/inline': {
        // Generator options for asset/inline modules

        // The options for data url generator.
        dataUrl: {
          // Asset encoding (defaults to "base64")
          // type: 'base64' | false
          encoding: 'base64',
          // Asset mimetype (getting from file extension by default).
          // type: string
          mimetype: 'image/png',
        },
      },
      'asset/resource': {
        // Generator options for asset/resource modules

        // Emit an output asset from this asset module. This can be set to 'false' to omit emitting e. g. for SSR.
        // type: boolean
        emit: true,

        // Customize filename for this asset module
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        filename: 'static/[path][name][ext]',

        // Customize publicPath for asset/resource modules, available since webpack 5.28.0
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        publicPath: 'https://cdn/assets/',

        // Emit the asset in the specified folder relative to 'output.path', available since webpack 5.67.0
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        outputPath: 'cdn-assets/',
      },
      javascript: {
        // No generator options are supported for this module type yet
      },
      'javascript/auto': {
        // ditto
      },
      'javascript/dynamic': {
        // ditto
      },
      'javascript/esm': {
        // ditto
      },
      css: {
        // Generator options for css modules

        // Avoid generating and loading a stylesheet and only embed exports from css into output javascript files.
        // type: boolean, available since webpack 5.90.0
        exportsOnly: true,

        // Customize how css export names are exported to javascript modules, such as keeping them as is, transforming them to camel case, etc.
        // type: 'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only' | ((name: string) => string)
        // available since webpack 5.90.4
        exportsConvention: 'camel-case-only',
      },
      'css/auto': {
        // Generator options for css/auto modules

        // Avoid generating and loading a stylesheet and only embed exports from css into output javascript files.
        // type: boolean, available since webpack 5.90.0
        exportsOnly: true,

        // Customize how css export names are exported to javascript modules, such as keeping them as is, transforming them to camel case, etc.
        // type: 'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only' | ((name: string) => string)
        // available since webpack 5.90.4
        exportsConvention: 'camel-case-only',

        // Customize the format of the local class names generated for css modules.
        // type: string, besides the substitutions at File-level and Module-level in https://webpack.dokyumento.jp/configuration/output/#template-strings, also include [uniqueName] and [local].
        // available since webpack 5.90.4
        localIdentName: '[uniqueName]-[id]-[local]',
      },
      'css/global': {
        // ditto
      },
      'css/module': {
        // ditto
      },
      // others…
    },
  },
};

module.parser

5.12.0+

module.generator と同様に、module.parser を使用すると、すべてのパーサーのオプションを1か所で構成できます。

webpack.config.js

module.exports = {
  module: {
    parser: {
      asset: {
        // Parser options for asset modules

        // The options for data url generator.
        dataUrl: {
          // Asset encoding (defaults to "base64")
          // type: 'base64' | false
          encoding: 'base64',
          // Asset mimetype (getting from file extension by default).
          // type: string
          mimetype: 'image/png',
        },

        // Emit an output asset from this asset module. This can be set to 'false' to omit emitting e. g. for SSR.
        // type: boolean
        emit: true,

        // Customize filename for this asset module
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        filename: 'static/[path][name][ext]',

        // Customize publicPath for asset modules, available since webpack 5.28.0
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        publicPath: 'https://cdn/assets/',

        // Emit the asset in the specified folder relative to 'output.path', available since webpack 5.67.0
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        outputPath: 'cdn-assets/',
      },
      'asset/inline': {
        // No parser options are supported for this module type yet
      },
      'asset/resource': {
        // ditto
      },
      'asset/source': {
        // ditto
      },
      javascript: {
        // Parser options for javascript modules
        // e.g, enable parsing of require.ensure syntax
        requireEnsure: true,
      },
      'javascript/auto': {
        // ditto
      },
      'javascript/dynamic': {
        // ditto
      },
      'javascript/esm': {
        // ditto
      },
      css: {
        // Parser options for css modules

        // Use ES modules named export for css exports, available since webpack 5.90.0
        // type: boolean
        namedExports: true,
      },
      'css/auto': {
        // ditto
      },
      'css/global': {
        // ditto
      },
      'css/module': {
        // ditto
      },
      // others…
    },
  },
};

module.parser.javascript

JavaScript パーサーのオプションを構成します。

module.exports = {
  module: {
    parser: {
      javascript: {
        // ...
        commonjsMagicComments: true,
      },
    },
  },
};

特定のモジュールを対象とするために、Rule.parser でこれらのオプションを構成することも許可されています。

module.parser.javascript.commonjsMagicComments

CommonJS のマジックコメントのサポートを有効にします。

型: boolean
利用可能: 5.17.0+

例

module.exports = {
  module: {
    parser: {
      javascript: {
        commonjsMagicComments: true,
      },
    },
  },
};

現時点では webpackIgnore コメントのみがサポートされていることに注意してください。

const x = require(/* webpackIgnore: true */ 'x');

module.parser.javascript.dynamicImportFetchPriority

ダイナミックインポートのグローバルな fetchPriority を指定します。

型: 'low' | 'high' | 'auto' | false
利用可能: 5.87.0+

例

module.exports = {
  module: {
    parser: {
      javascript: {
        dynamicImportFetchPriority: 'high',
      },
    },
  },
};

module.parser.javascript.dynamicImportMode

ダイナミックインポートのグローバルモードを指定します。

型: 'eager' | 'weak' | 'lazy' | 'lazy-once'
利用可能: 5.73.0+

例

module.exports = {
  module: {
    parser: {
      javascript: {
        dynamicImportMode: 'lazy',
      },
    },
  },
};

module.parser.javascript.dynamicImportPrefetch

ダイナミックインポートのグローバルのプリフェッチを指定します。

型: number | boolean
利用可能: 5.73.0+

例

module.exports = {
  module: {
    parser: {
      javascript: {
        dynamicImportPrefetch: false,
      },
    },
  },
};

module.parser.javascript.dynamicImportPreload

ダイナミックインポートのグローバルのプリロードを指定します。

型: number | boolean
利用可能: 5.73.0+

例

module.exports = {
  module: {
    parser: {
      javascript: {
        dynamicImportPreload: false,
      },
    },
  },
};

module.parser.javascript.exportsPresence

"import ... from ..." および "export ... from ..." における無効なエクスポート名の動作を指定します。

型: 'error' | 'warn' | 'auto' | false
利用可能: 5.62.0+

例

module.exports = {
  module: {
    parser: {
      javascript: {
        exportsPresence: 'error',
      },
    },
  },
};

module.parser.javascript.importExportsPresence

"import ... from ..." における無効なエクスポート名の動作を指定します。

型: 'error' | 'warn' | 'auto' | false
利用可能: 5.62.0+

例

module.exports = {
  module: {
    parser: {
      javascript: {
        importExportsPresence: 'error',
      },
    },
  },
};

module.parser.javascript.importMeta

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

型: boolean = true
利用可能: 5.68.0+

例

module.exports = {
  module: {
    parser: {
      javascript: {
        importMeta: false,
      },
    },
  },
};

module.parser.javascript.importMetaContext

import.meta.webpackContext の評価を有効/無効にします。

型: boolean
利用可能: 5.70.0+

例

module.exports = {
  module: {
    parser: {
      javascript: {
        importMetaContext: true,
      },
    },
  },
};

module.parser.javascript.reexportExportsPresence

"export ... from ..." における無効なエクスポート名の動作を指定します。これは、TypeScript で型を再エクスポートする際に、"export ... from ..." から "export type ... from ..." への移行中に無効にするのに役立つ場合があります。

型: 'error' | 'warn' | 'auto' | false
利用可能: 5.62.0+

例

module.exports = {
  module: {
    parser: {
      javascript: {
        reexportExportsPresence: 'error',
      },
    },
  },
};

module.parser.javascript.url

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

型: boolean = true | 'relative'

例

module.exports = {
  module: {
    parser: {
      javascript: {
        url: false, // disable parsing of `new URL()` syntax
      },
    },
  },
};

module.parser.javascript.url の 'relative' 値は、webpack 5.23.0 以降で使用可能です。使用すると、webpack は new URL() 構文に対して相対 URL を生成します。つまり、結果の URL にはベース URL が含まれません。

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

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

これは、サーバー側でベース URL が不明な場合（および数バイト節約できる）、SSR (サーバーサイドレンダリング) に役立ちます。完全に同一にするには、クライアントビルドにも使用する必要があります。
また、サーバーサイドレンダリングが一般的に必要となる静的サイトジェネレーター、mini-css-plugin、html-plugin などにも役立ちます。

module.noParse

RegExp [RegExp] function(resource) string [string]

指定された正規表現に一致するファイルの解析を webpack が行わないようにします。無視されたファイルには、import、require、define、またはその他のインポートメカニズムへの呼び出しを含めるべきではありません。これにより、大きなライブラリを無視する場合にビルドパフォーマンスを向上させることができます。

webpack.config.js

module.exports = {
  //...
  module: {
    noParse: /jquery|lodash/,
  },
};

module.exports = {
  //...
  module: {
    noParse: (content) => /jquery|lodash/.test(content),
  },
};

module.unsafeCache

boolean function (module)

モジュールリクエストの解決をキャッシュします。module.unsafeCache にはいくつかのデフォルトがあります。

cache が無効になっている場合は false。
cache が有効で、モジュールが node_modules から来たと思われる場合は true、それ以外の場合は false。

webpack.config.js

module.exports = {
  //...
  module: {
    unsafeCache: false,
  },
};

module.rules

(Rule | undefined | null | false | "" | 0 | "...")[]

モジュールが作成されるときにリクエストに一致するルールの配列。これらのルールは、モジュールの作成方法を変更できます。ローダーをモジュールに適用したり、パーサーを変更したりできます。

webpack 5.87.0 以降、false、undefined、null、0 などの falsy 値を使用して、ルールを条件付きで無効にすることができます。

Rule

オブジェクト

ルールは、条件、結果、ネストされたルールの3つの部分に分けることができます。

ルールの条件

条件には2つの入力値があります。

リソース: リクエストされたファイルの絶対パス。これはすでに resolve ルールに従って解決されています。
イシュー: リソースをリクエストしたモジュールのファイルの絶対パス。これはインポートの場所です。

例: app.js 内で import './style.css' を行う場合、リソースは /path/to/style.css で、イシューは /path/to/app.js です。

ルールでは、test、include、exclude、resource の各プロパティはリソースと照合され、issuer プロパティはイシューと照合されます。

複数の条件を使用する場合、すべての条件が一致する必要があります。

ルールの結果

ルールの結果は、ルールの条件が一致した場合にのみ使用されます。

ルールには2つの出力値があります。

適用されたローダー: リソースに適用されたローダーの配列。
パーサーオプション: このモジュールのパーサーを作成するために使用されるオプションオブジェクト。

これらのプロパティは、ローダーに影響します: loader, options, use.

互換性のため、これらのプロパティも使用できます: query, loaders.

enforce プロパティは、ローダーのカテゴリに影響します。それが normal, pre- or post- loader のいずれであるか。

parser プロパティは、パーサーオプションに影響します。

ネストされたルール

ネストされたルールは、rules および oneOf プロパティの下に指定できます。

これらのルールは、親ルールの条件が一致した場合にのみ評価されます。各ネストされたルールには、独自の条件を含めることができます。

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

親ルール
ルール
oneOf

Rule.enforce

文字列

指定可能な値: 'pre' | 'post'

ローダーのカテゴリを指定します。値がない場合は、通常のローダーを意味します。

インポート/ require のインラインで適用されるローダーである「インラインローダー」という追加カテゴリもあります。

すべてのローダーが順番に実行する2つのフェーズがあります。

Pitching フェーズ: ローダーの pitch メソッドは、post、inline、normal、pre の順序で呼び出されます。詳細については、Pitching Loader を参照してください。
Normal フェーズ: ローダーの normal メソッドは、pre, normal, inline, post の順序で実行されます。モジュールのソースコードの変換はこのフェーズで行われます。

すべての通常のローダーは、リクエストに ! をプレフィックスすることで省略（オーバーライド）できます。

すべての通常のローダーとプリローダーは、リクエストに -! をプレフィックスすることで省略（オーバーライド）できます。

すべての通常のローダー、ポストローダー、プリローダーは、リクエストに !! をプレフィックスすることで省略（オーバーライド）できます。

// Disable normal loaders
import { a } from '!./file1.js';

// Disable preloaders and normal loaders
import { b } from '-!./file2.js';

// Disable all loaders
import { c } from '!!./file3.js';

インラインローダーと ! プレフィックスは、非標準であるため使用しないでください。これらは、ローダー生成コードによって使用される場合があります。

Rule.exclude

これらの条件のいずれかに一致するすべてのモジュールを除外します。Rule.exclude オプションを指定する場合は、Rule.resource も指定できません。詳細については、Rule.resource および Condition.exclude を参照してください。

Rule.include

これらの条件のいずれかに一致するすべてのモジュールを含めます。Rule.include オプションを指定する場合は、Rule.resource も指定できません。詳細については、Rule.resource および Condition.include を参照してください。

Rule.issuer

リクエストを発行したモジュールと照合する Condition。次の例では、a.js リクエストの issuer は、index.js ファイルへのパスになります。

index.js

import A from './a.js';

このオプションは、特定のモジュールまたはモジュール群の依存関係にローダーを適用するために使用できます。

Rule.issuerLayer

発行元のレイヤーでフィルター/マッチングできます。

webpack.config.js

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

Rule.layer

文字列

モジュールを配置するレイヤーを指定します。モジュール群は1つのレイヤーにまとめることができ、そのレイヤーをsplit chunks、stats、またはentry optionsで使用できます。

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /module-layer-change/,
        layer: 'layer',
      },
    ],
  },
};

Rule.loader

Rule.loader は Rule.use: [ { loader } ] のショートカットです。詳細は Rule.use および UseEntry.loader を参照してください。

Rule.loaders

Rule.loaders は Rule.use のエイリアスです。詳細は Rule.use を参照してください。

Rule.mimetype

mimetype を使用して、データ URI に構成ルールを一致させることができます。

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        mimetype: 'application/json',
        type: 'json',
      },
    ],
  },
};

application/json、text/javascript、application/javascript、application/node、および application/wasm は、デフォルトで mimetype としてすでに含まれています。

Rule.oneOf

Rules の配列で、Rule が一致する場合、最初に一致した Rule のみが使用されます。

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        oneOf: [
          {
            resourceQuery: /inline/, // foo.css?inline
            type: 'asset/inline',
          },
          {
            resourceQuery: /external/, // foo.css?external
            type: 'asset/resource',
          },
        ],
      },
    ],
  },
};

Rule.options / Rule.query

Rule.options と Rule.query は Rule.use: [ { options } ] のショートカットです。詳細は Rule.use および UseEntry.options を参照してください。

Rule.parser

パーサーオプションを持つオブジェクト。適用されたすべてのパーサーオプションはマージされます。

パーサーはこれらのオプションを検査し、それに応じて自身を無効または再構成できます。デフォルトプラグインのほとんどは、値を次のように解釈します。

オプションを false に設定すると、パーサーが無効になります。
オプションを true に設定するか、undefined のままにすると、パーサーが有効になります。

ただし、パーサープラグインはブール値だけでなく、それ以上のものを受け入れる可能性があります。たとえば、内部の NodeStuffPlugin は、特定の Rule に追加のオプションを追加するために、true の代わりにオブジェクトを受け入れることができます。

例 (デフォルトプラグインによるパーサーオプション)

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        parser: {
          amd: false, // disable AMD
          commonjs: false, // disable CommonJS
          system: false, // disable SystemJS
          harmony: false, // disable ES2015 Harmony import/export
          requireInclude: false, // disable require.include
          requireEnsure: false, // disable require.ensure
          requireContext: false, // disable require.context
          browserify: false, // disable special handling of Browserify bundles
          requireJs: false, // disable requirejs.*
          node: false, // disable __dirname, __filename, module, require.extensions, require.main, etc.
          commonjsMagicComments: false, // disable magic comments support for CommonJS
          node: {}, // reconfigure node layer on module level
          worker: ['default from web-worker', '...'], // Customize the WebWorker handling for javascript files, "..." refers to the defaults.
        },
      },
    ],
  },
};

Rule.type が asset の場合、Rules.parser オプションは、ファイルの内容を Base64 にエンコードするか、出力ディレクトリに個別のファイルとして出力するかどうかを示すオブジェクトまたは関数である可能性があります。

Rule.type が asset または asset/inline の場合、Rule.generator オプションは、モジュールソースのエンコードを表すオブジェクト、またはカスタムアルゴリズムによってモジュールのソースをエンコードする関数である可能性があります。

詳細およびユースケースについては、Asset Modules ガイドを参照してください。

Rule.parser.dataUrlCondition

object = { maxSize number = 8096 } function (source, { filename, module }) => boolean

モジュールソースサイズが maxSize より小さい場合、モジュールは Base64 エンコードされた文字列としてバンドルに注入され、それ以外の場合はモジュールファイルが出力ディレクトリに出力されます。

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
      },
    ],
  },
};

関数が指定された場合、true を返すことで、モジュールを Base64 エンコードされた文字列としてバンドルに注入するように webpack に指示し、それ以外の場合はモジュールファイルが出力ディレクトリに出力されます。

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        parser: {
          dataUrlCondition: (source, { filename, module }) => {
            const content = source.toString();
            return content.includes('some marker');
          },
        },
      },
    ],
  },
};

Rule.generator

Rule.generator.dataUrl

object = { encoding string = 'base64' | false, mimetype string = undefined | false } function (content, { filename, module }) => string

Rule.generator.dataUrl をオブジェクトとして使用する場合、2つのプロパティを設定できます。

encoding: 'base64' に設定すると、モジュールソースは Base64 アルゴリズムを使用してエンコードされます。encoding を false に設定すると、エンコードが無効になります。
mimetype: データ URI の mimetype。デフォルトでは、モジュールリソースの拡張子から解決されます。

webpack.config.js

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

関数として使用すると、すべてのモジュールに対して実行され、データ URI 文字列を返す必要があります。

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        generator: {
          dataUrl: (content) => {
            const svgToMiniDataURI = require('mini-svg-data-uri');
            if (typeof content !== 'string') {
              content = content.toString();
            }
            return svgToMiniDataURI(content);
          },
        },
      },
    ],
  },
};

Rule.generator.emit

Asset Modules からのアセットの書き込みをオプトアウトします。サーバーサイドレンダリングの場合に使用したい場合があります。

型: boolean = true
利用可能: 5.25.0+

例

module.exports = {
  // …
  module: {
    rules: [
      {
        test: /\.png$/i,
        type: 'asset/resource',
        generator: {
          emit: false,
        },
      },
    ],
  },
};

Rule.generator.filename

output.assetModuleFilename と同じですが、特定のルール用です。output.assetModuleFilename をオーバーライドし、asset および asset/resource モジュールタイプでのみ機能します。

webpack.config.js

module.exports = {
  //...
  output: {
    assetModuleFilename: 'images/[hash][ext][query]',
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource',
      },
      {
        test: /\.html/,
        type: 'asset/resource',
        generator: {
          filename: 'static/[hash][ext]',
        },
      },
    ],
  },
};

Rule.generator.publicPath

特定のアセットモジュールの publicPath をカスタマイズします。

タイプ: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
利用可能: 5.28.0+

module.exports = {
  //...
  output: {
    publicPath: 'static/',
  },
  module: {
    rules: [
      {
        test: /\.png$/i,
        type: 'asset/resource',
        generator: {
          publicPath: 'assets/',
        },
      },
    ],
  },
};

Rule.generator.outputPath

'output.path' 相対の指定されたフォルダーにアセットを出力します。これは、カスタムの 'publicPath' がそこでフォルダー構造に一致するように指定されている場合にのみ必要になるはずです。

タイプ: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
利用可能: 5.67.0+

module.exports = {
  //...
  output: {
    publicPath: 'static/',
  },
  module: {
    rules: [
      {
        test: /\.png$/i,
        type: 'asset/resource',
        generator: {
          publicPath: 'https://cdn/assets/',
          outputPath: 'cdn-assets/',
        },
      },
    ],
  },
};

Rule.resource

リソースと一致するCondition。Rule conditions の詳細を参照してください。

Rule.resourceQuery

リソースクエリと一致するCondition。このオプションは、リクエスト文字列のクエリセクション (つまり、疑問符以降) に対してテストするために使用されます。import Foo from './foo.css?inline' を行うと、次の条件が一致します。

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        resourceQuery: /inline/,
        type: 'asset/inline',
      },
    ],
  },
};

Rule.parser.parse

function(input) => string | object

Rule.type が 'json' に設定されている場合、Rules.parser.parse オプションは、モジュールのソースを解析し、JavaScript の object に変換するカスタムロジックを実装する関数である可能性があります。特定のローダーなしで、toml、yaml、およびその他の非 JSON ファイルを JSON としてインポートすると便利な場合があります。

webpack.config.js

const toml = require('toml');

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.toml/,
        type: 'json',
        parser: {
          parse: toml.parse,
        },
      },
    ],
  },
};

Rule.rules

Rule が一致する場合にも使用される Rules の配列。

Rule.scheme

使用されているスキーマ (例: data、http) を一致させます。

タイプ: string | RegExp | ((value: string) => boolean) | RuleSetLogicalConditions | RuleSetCondition[]
利用可能: 5.38.0+

webpack.config.js

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

Rule.sideEffects

bool

モジュールのどの部分に副作用が含まれているかを示します。詳細については、Tree Shaking を参照してください。

Rule.test

テストアサーションに合格するすべてのモジュールを含めます。Rule.test オプションを指定する場合は、Rule.resource を指定することもできません。詳細については、Rule.resource および Condition を参照してください。

Rule.type

文字列

Rule.type は、一致するモジュールのタイプを設定します。これにより、defaultRules とそれらのデフォルトのインポート動作が発生しなくなります。たとえば、カスタムローダーを介して .json ファイルをロードする場合、webpack の組み込み JSON インポートをバイパスするには、type を javascript/auto に設定する必要があります。

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      //...
      {
        test: /\.json$/,
        type: 'javascript/auto',
        loader: 'custom-json-loader',
      },
    ],
  },
};

asset* タイプの詳細については、Asset Modules ガイドを参照してください。

css/auto

5.87.0+

css/auto モジュールタイプのユースケースについては、こちらを参照してください。css/auto を使用するには、experiments.css を有効にしてください。

module.exports = {
  target: 'web',
  mode: 'development',
  experiments: {
    css: true,
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: 'less-loader',
        type: 'css/auto',
      },
    ],
  },
};

Rule.use

[UseEntry] function(info)

webpack 5.87.0 以降、undefined null などの falsy な値を使用して、特定の use エントリを条件付きで無効にすることができます。

[UseEntry]

Rule.use は、モジュールに適用される UseEntry の配列にすることができます。各エントリは、使用するローダーを指定します。

文字列を渡すこと (例: use: [ 'style-loader' ]) は、ローダープロパティ (例: use: [ { loader: 'style-loader' } ]) のショートカットです。

複数のローダーを渡すことでローダーをチェーンできます。これらは右から左 (最後に設定したものから最初に適用) に適用されます。

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: 'less-loader',
            options: {
              noIeCompat: true,
            },
          },
        ],
      },
    ],
  },
};

function(info)

Rule.use は、ロードされるモジュールを記述するオブジェクト引数を受け取り、UseEntry 項目の配列を返す必要のある関数にすることもできます。

info オブジェクトパラメーターには、次のフィールドがあります。

compiler: 現在の webpack コンパイラー (未定義の場合があります)
issuer: ロードされているモジュールをインポートしているモジュールへのパス
realResource: 常にロードされているモジュールへのパス
resource: ロードされているモジュールへのパス。リソース名がリクエスト文字列で !=! を介して上書きされない限り、通常は realResource と等しくなります。

配列と同じショートカットを戻り値に使用できます (例: use: [ 'style-loader' ])。

webpack.config.js

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

詳細については、UseEntry を参照してください。

Rule.resolve

モジュールレベルで解決を設定できます。利用可能なすべてのオプションについては、resolve configuration page を参照してください。適用されたすべての解決オプションは、より高いレベルの resolve と深くマージされます。

たとえば、./src/index.js、./src/footer/default.js、およびモジュールレベルの解決を示すための ./src/footer/overridden.js にエントリがあると想像してみましょう。

./src/index.js

import footer from 'footer';
console.log(footer);

./src/footer/default.js

export default 'default footer';

./src/footer/overridden.js

export default 'overridden footer';

webpack.js.org

module.exports = {
  resolve: {
    alias: {
      footer: './footer/default.js',
    },
  },
};

この設定でバンドルを作成すると、console.log(footer) は 'default footer' と出力されます。.js ファイルに対して Rule.resolve を設定し、footer のエイリアスを overridden.js に設定しましょう。

webpack.js.org

module.exports = {
  resolve: {
    alias: {
      footer: './footer/default.js',
    },
  },
  module: {
    rules: [
      {
        resolve: {
          alias: {
            footer: './footer/overridden.js',
          },
        },
      },
    ],
  },
};

更新された設定でバンドルを作成すると、console.log(footer) は 'overridden footer' と出力されます。

resolve.fullySpecified

boolean = true

有効にすると、.mjs ファイルや、最も近い親の package.json ファイルに値が "module" の "type" フィールドが含まれている場合の他の .js ファイルでモジュールを import する際に、ファイル拡張子を指定する必要があります。そうしないと、webpackは Module not found エラーでコンパイルに失敗します。また、webpackはresolve.mainFiles で定義されたファイル名を持つディレクトリを解決しません。ファイル名は自分で指定する必要があります。

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        resolve: {
          fullySpecified: false, // disable the behaviour
        },
      },
    ],
  },
};

条件

条件は次のいずれかです。

文字列：入力が指定された文字列で始まる必要があります。例えば、絶対ディレクトリパス、またはファイルへの絶対パスです。
RegExp：入力に対してテストされます。
関数：入力とともに呼び出され、一致するには真の値を返す必要があります。
条件の配列：少なくとも1つの条件が一致する必要があります。
オブジェクト：すべてのプロパティが一致する必要があります。各プロパティには定義された動作があります。

{ and: [Condition] }：すべての条件が一致する必要があります。

{ or: [Condition] }：いずれかの条件が一致する必要があります。

{ not: [Condition] }：すべての条件が一致してはなりません。

例

const path = require('path');

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        include: [
          // will include any paths relative to the current directory starting with `app/styles`
          // e.g. `app/styles.css`, `app/styles/styles.css`, `app/stylesheet.css`
          path.resolve(__dirname, 'app/styles'),
          // add an extra slash to only include the content of the directory `vendor/styles/`
          path.join(__dirname, 'vendor/styles/'),
        ],
      },
    ],
  },
};

UseEntry

object function(info)

オブジェクト

文字列である loader プロパティを持つ必要があります。これは、ローダー解決オプション(resolveLoader)を使用して、設定contextに対して相対的に解決されます。

文字列またはオブジェクトである options プロパティを持つことができます。この値はローダーに渡され、ローダーはそれをローダーオプションとして解釈する必要があります。

互換性のために、query プロパティも可能です。これは options プロパティのエイリアスです。代わりに options プロパティを使用してください。

webpackは、リソースとすべてのローダー（オプションを含む）から一意のモジュール識別子を生成する必要があることに注意してください。オプションオブジェクトの JSON.stringify を使用してこれを行おうとします。これは99.9％の場合で問題ありませんが、異なるオプションを持つ同じローダーをリソースに適用し、オプションが同じ文字列化された値を持つ場合、一意ではない可能性があります。

また、オプションオブジェクトを文字列化できない（つまり、循環JSON）場合にも失敗します。このため、オプションオブジェクトに一意の識別子として使用される ident プロパティを含めることができます。

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        loader: 'css-loader',
        options: {
          modules: true,
        },
      },
    ],
  },
};

function(info)

UseEntry は、ロードされるモジュールを記述するオブジェクト引数を受け取り、関数ではない UseEntry オブジェクトを返す必要がある関数にすることもできます。これは、モジュールごとにローダーオプションを変更するために使用できます。

info オブジェクトパラメーターには、次のフィールドがあります。

compiler: 現在の webpack コンパイラー (未定義の場合があります)
issuer: ロードされているモジュールをインポートしているモジュールへのパス
realResource: 常にロードされているモジュールへのパス
resource: ロードされているモジュールへのパス。リソース名がリクエスト文字列で !=! を介して上書きされない限り、通常は realResource と等しくなります。

webpack.config.js

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