模組

這些選項決定專案中不同類型的模組將如何處理。

module.defaultRules

預設應用於模組的規則陣列。

詳情請見原始碼。

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

從 webpack 5.87.0 開始，包括 0、""、false、null 和 undefined 在內的虛假值都允許傳遞給 module.defaultRules 以有條件地停用特定規則。

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

module.generator

5.12.0+

可以使用 module.generator 在一個地方配置所有生成器的選項。

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.dev.org.tw/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 在一個地方配置所有解析器的選項。

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 啟用 magic comments 支援。

類型：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 ...\" 中無效匯出名稱的行為。這在從 \"export ... from ...\" 遷移到 \"export type ... from ...\" 時禁用可能會很有用，因為這會在 TypeScript 中重新匯出類型。

類型：'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
      },
    },
  },
};

'relative' 值適用於 module.parser.javascript.url，自 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 已啟用，且模組看來來自節點模組，則為 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）用於有條件停用規則。

規則

物件

規則可分為三個部分：條件、結果和巢狀規則。

規則條件

條件有兩個輸入值

資源：請求檔案的絕對路徑。已根據 resolve 規則解析。
發行者：請求資源的模組檔案的絕對路徑。這是匯入位置。

範例：當我們在 app.js 中 import './style.css' 時，資源為 /path/to/style.css，發行者為 /path/to/app.js。

在規則中，屬性 test、include、exclude 和 resource 與資源相符，屬性 issuer 與發行者相符。

使用多個條件時，所有條件都必須相符。

規則結果

僅在規則條件相符時，才會使用規則結果。

規則有兩個輸出值

已套用的載入器：套用到資源的載入器陣列。
剖析器選項：用於為此模組建立剖析器的選項物件。

這些屬性會影響載入器：loader、options、use。

為了相容性，也包含這些屬性：query、loaders。

enforce 屬性會影響載入器類別。無論是常規、前置或後置載入器。

parser 屬性會影響剖析器選項。

巢狀規則

巢狀規則可以在 rules 和 oneOf 屬性下方指定。

這些規則僅在父規則條件符合時才會評估。每個巢狀規則都可以包含自己的條件。

評估順序如下

父規則
規則
oneOf

Rule.enforce

字串

可能值：'pre' | 'post'

指定載入器的類別。沒有值表示常規載入器。

還有一個額外的類別「內嵌載入器」，這些載入器會套用在 import/require 的內嵌。

所有載入器都會依序進入兩個階段

投遞階段：載入器上的投遞方法會依序呼叫 post、inline、normal、pre。有關詳細資訊，請參閱投遞載入器。
常規階段：載入器上的常規方法會依序執行 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

字串

指定模組應放置的層級。一組模組可以合併成一個層級，然後可以在分割區塊、統計資料或進入選項中使用。

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

Rule 的陣列，其中僅在 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 可以接受物件，而非 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 選項可能是描述模組原始碼編碼的物件，或透過自訂演算法編碼模組原始碼的函式。

請參閱資產模組指南，以取得更多資訊和使用案例。

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 會指示 webpack 將模組以 Base64 編碼字串的形式注入套件中，否則模組檔案會發佈到輸出目錄中。

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 用作物件時，您可以設定兩個屬性

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 模組寫入資產，您可能想在伺服器端呈現案例中使用它。

類型：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

自訂特定 Asset 模組的 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

與資源相符的 條件。詳情請參閱 規則 條件。

Rule.resourceQuery

與資源查詢相符的 條件。此選項用於測試請求字串的查詢部分（即從問號開始）。如果您要 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.scheme

相符使用的架構，例如 data、http。

類型：字串 | RegExp | ((值：字串) => 布林值) | RuleSetLogicalConditions | RuleSetCondition[]
可用：5.38.0+

webpack.config.js

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

Rule.sideEffects

布林值

指出模組的哪些部分包含副作用。請參閱 Tree Shaking 以取得詳細資料。

Rule.test

包含通過測試斷言的所有模組。如果您提供 Rule.test 選項，您不能同時提供 Rule.resource。請參閱 Rule.resource 和 Condition 以取得詳細資料。

Rule.type

字串

Rule.type 設定符合模組的類型。這可防止預設規則及其預設匯入行為發生。例如，如果您想透過自訂載入器載入 .json 檔案，您需要將 type 設定為 javascript/auto 以繞過 webpack 內建的 json 匯入。

webpack.config.js

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

請參閱 Asset Modules 指南以取得更多關於 asset* 類型的資訊。

css/auto

5.87.0+

請參閱 css/auto 模組類型的使用案例在此。請務必啟用 experiments.css 以使用 css/auto。

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 等假值來有條件地停用特定使用條目。

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

函式（資訊）

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

可以在模組層級設定解析。請參閱解析設定頁面上的所有可用選項。所有套用的解析選項都會與較高層級的解析深度合併。

例如，假設我們在 ./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) 會輸出「預設頁尾」。讓我們為 .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) 會輸出「覆寫的頁尾」。

resolve.fullySpecified

布林值 = true

啟用後，在 .mjs 檔案或任何其他 .js 檔案中 import 模組時，應提供檔案副檔名，且其最近的父 package.json 檔案包含 "type" 欄位，其值為 "module"，否則 webpack 會因 Module not found 錯誤而編譯失敗。而且 webpack 不會解析在 resolve.mainFiles 中定義檔名的目錄，您必須自行指定檔名。

webpack.config.js

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

條件

條件可以是下列其中一種

字串：若要比對，輸入必須以提供的字串開頭。例如，絕對目錄路徑或檔案的絕對路徑。
正規表示法：使用輸入進行測試。
函式：以輸入呼叫，且必須傳回真值才能比對。
條件陣列：至少一個條件必須比對。
物件：所有屬性都必須比對。每個屬性都有定義的行為。

{ 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 屬性，為字串。它會相對於組態 context 解析，並使用 loader 解析選項 (resolveLoader)。

它可以有一個 options 屬性，為字串或物件。此值會傳遞給 loader，loader 應將其解釋為 loader 選項。

為了相容性，query 屬性也是可行的，它是 options 屬性的別名。請改用 options 屬性。

請注意，webpack 需要從資源和包含選項的所有載入器產生唯一的模組識別碼。它會嘗試使用選項物件的 JSON.stringify 來執行此操作。在 99.9% 的案例中，這沒問題，但如果您對資源套用具有不同選項的相同載入器，且選項具有相同的字串化值，則可能無法產生唯一的識別碼。

如果選項物件無法字串化（例如，循環 JSON），也會中斷。因此，您可以在選項物件中設定 ident 屬性，它會用作唯一的識別碼。

webpack.config.js

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

函式（資訊）

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

模組內容

這些選項描述遇到動態依賴項時建立的內容的預設設定。

unknown 動態依賴項的範例：require。

expr 動態依賴項的範例：require(expr)。

wrapped 動態依賴項的範例：require('./templates/' + expr)。

以下是可用的選項及其預設值

webpack.config.js

module.exports = {
  //...
  module: {
    exprContextCritical: true,
    exprContextRecursive: true,
    exprContextRegExp: false,
    exprContextRequest: '.',
    unknownContextCritical: true,
    unknownContextRecursive: true,
    unknownContextRegExp: false,
    unknownContextRequest: '.',
    wrappedContextCritical: false,
    wrappedContextRecursive: true,
    wrappedContextRegExp: /.*/,
    strictExportPresence: false,
  },
};

幾個使用案例

對動態依賴項發出警告：wrappedContextCritical: true。
require(expr) 應包含整個目錄：exprContextRegExp: /^\.\//
require('./templates/' + expr) 預設不應包含子目錄：wrappedContextRecursive: false
strictExportPresence 會讓缺少的匯出變成錯誤，而不是警告
設定部分動態依賴項的內部正規表示式：wrappedContextRegExp: /\\.\\*/

編輯此頁面·列印此頁面

« 上一頁

輸出

解析

模組

module.defaultRules

module.generator

module.parser

module.parser.javascript

module.parser.javascript.commonjsMagicComments

module.parser.javascript.dynamicImportFetchPriority

module.parser.javascript.dynamicImportMode

module.parser.javascript.dynamicImportPrefetch

module.parser.javascript.dynamicImportPreload

module.parser.javascript.exportsPresence

module.parser.javascript.importExportsPresence

module.parser.javascript.importMeta

module.parser.javascript.importMetaContext

module.parser.javascript.reexportExportsPresence

module.parser.javascript.url

module.noParse

module.unsafeCache

module.rules

規則

規則條件

規則結果

巢狀規則

Rule.enforce

Rule.exclude

Rule.include

Rule.issuer

Rule.issuerLayer

Rule.layer

Rule.loader

Rule.loaders

Rule.mimetype

Rule.oneOf

Rule.options / Rule.query

Rule.parser

Rule.parser.dataUrlCondition

Rule.generator

Rule.generator.dataUrl

Rule.generator.emit

Rule.generator.filename

Rule.generator.publicPath

Rule.generator.outputPath

Rule.resource

Rule.resourceQuery

Rule.parser.parse

Rule.rules

Rule.scheme

Rule.sideEffects

Rule.test

Rule.type

css/auto

Rule.use

Rule.resolve

resolve.fullySpecified

條件

UseEntry

模組內容

21 貢獻者