Webpack Module(模塊)

2023-05-15 17:40 更新

這些選項(xiàng)決定了如何處理項(xiàng)目中的不同類(lèi)型的模塊。

module.generator

?5.12.0+?

可以使用 ?module.generator? 在一個(gè)地方配置所有生成器的選項(xiàng)。

webpack.config.js 

module.exports = {
  module: {
    generator: {
      asset: {
        // asseet 模塊的 generator 選項(xiàng)

        // 自定義 asset 模塊的 publicPath，自 webpack 5.28.0 起可用
        publicPath: 'assets/',

        // 將靜態(tài)資源輸出到相對(duì)于 'output.path' 的指定文件夾中，webpack 5.67.0 后可用
        outputPath: 'cdn-assets/',
      },
      'asset/inline': {
        // asset/內(nèi)聯(lián)模塊的 generator 選項(xiàng)
      },
      'asset/resource': {
        // asset/資源模塊的 generator 選項(xiàng)

        // 自定義 asset/resource 模塊的 publicPath，自 webpack 5.28.0 起可用
        publicPath: 'assets/',

        // 將靜態(tài)資源輸出到相對(duì)于 'output.path' 的指定文件夾中，webpack 5.67.0 后可用
        outputPath: 'cdn-assets/',
      },
      javascript: {
        // 該模塊類(lèi)型尚不支持 generator 選項(xiàng)
      },
      'javascript/auto': {
        // 同上
      },
      'javascript/dynamic': {
        // 同上
      },
      'javascript/esm': {
        // 同上
      },
      // 其他...
    },
  },
};

module.parser

?5.12.0+?

類(lèi)似于 ?module.generator?，你可以用 ?module.parser? 在一個(gè)地方配置所有解析器的選項(xiàng)。

webpack.config.js 

module.exports = {
  module: {
    parser: {
      asset: {
        // 資產(chǎn)模塊的 parser 選項(xiàng)
      },
      'asset/inline': {
        // 該模塊類(lèi)型尚不支持 parser 選項(xiàng)
      },
      'asset/resource': {
        // 同上
      },
      'asset/source': {
        // 同上
      },
      javascript: {
        // javascript 模塊的解析器選項(xiàng)
        // 例如，啟用解析 require.ensure 語(yǔ)法的功能
        requireEnsure: true,
      },
      'javascript/auto': {
        // 同上
      },
      'javascript/dynamic': {
        // 同上
      },
      'javascript/esm': {
        // 同上
      },
      // 其他...
    },
  },
};

module.parser.javascript

JavaScript parser 的配置項(xiàng)。

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

允許在 ?Rule.parser? 中配置這些選項(xiàng)。也可以是特定模塊。

module.parser.javascript.commonjsMagicComments

為 CommonJS 啟用 魔法注釋。

  • 類(lèi)型：boolean
  • 可用版本：5.17.0+
  • 示例：
    module.exports = {
  module: {
    parser: {
      javascript: {
        commonjsMagicComments: true,
      },
    },
  },
};

請(qǐng)注意，目前只支持 ?webpackIgnore? 注釋?zhuān)?/p>

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

module.parser.javascript.dynamicImportMode

指定動(dòng)態(tài)導(dǎo)入的全局模式。

  • 類(lèi)型：?'eager' | 'weak' | 'lazy' | 'lazy-once'?
  • 可用版本：5.73.0+
  • 示例：
    module.exports = {
  module: {
    parser: {
      javascript: {
        dynamicImportMode: 'lazy',
      },
    },
  },
};

module.parser.javascript.dynamicImportPrefetch

指定動(dòng)態(tài)導(dǎo)入的全局 prefetch。

  • 類(lèi)型： ?number | boolean?
  • 可用版本：5.73.0+
  • 示例：
    module.exports = {
  module: {
    parser: {
      javascript: {
        dynamicImportPrefetch: false,
      },
    },
  },
};

module.parser.javascript.dynamicImportPreload

指定動(dòng)態(tài)導(dǎo)入的全局 preload。

  • 類(lèi)型： ?number | boolean?
  • 可用版本：5.73.0+
  • 示例：
    module.exports = {
  module: {
    parser: {
      javascript: {
        dynamicImportPreload: false,
      },
    },
  },
};

module.parser.javascript.exportsPresence

指出在 ?\"import ... from ...\"? 與 ?\"export ... from ...\"? 中無(wú)效導(dǎo)出名稱(chēng)的行為。

  • 類(lèi)型：?'error' | 'warn' | 'auto' | false?
  • 可用版本：5.62.0+
  • 示例：
    module.exports = {
  module: {
    parser: {
      javascript: {
        exportsPresence: 'error',
      },
    },
  },
};

module.parser.javascript.importExportsPresence

指出在 ?\"import ... from ...\"? 中無(wú)效導(dǎo)出名稱(chēng)的行為。

  • 類(lèi)型：?'error' | 'warn' | 'auto' | false?
  • 可用版本：5.62.0+
  • 示例：
    module.exports = {
  module: {
    parser: {
      javascript: {
        importExportsPresence: 'error',
      },
    },
  },
};

module.parser.javascript.importMeta

Enable or disable evaluating ?import.meta?.

  • 類(lèi)型：?boolean = true?
  • 可用版本：5.68.0+
  • 示例：
    module.exports = {
  module: {
    parser: {
      javascript: {
        importMeta: false,
      },
    },
  },
};

module.parser.javascript.importMetaContext

啟用/禁用 ?import.meta.webpackContext? 分析。

  • 類(lèi)型：?boolean?
  • 可用版本：5.70.0+
  • 示例：
    module.exports = {
  module: {
    parser: {
      javascript: {
        importMetaContext: true,
      },
    },
  },
};

module.parser.javascript.reexportExportsPresence

指出在 ?\"export ... from ...\"? 中無(wú)效導(dǎo)出名稱(chēng)的行為。當(dāng)在 TypeScript 重新導(dǎo)出類(lèi)型，從 ?\"export ... from ...\"? 遷移到 ?\"export type ... from ...\"? 時(shí)禁用該配置項(xiàng)是有用的。

  • 類(lèi)型：?'error' | 'warn' | 'auto' | false?
  • 可用版本：5.62.0+
  • 示例：
    module.exports = {
  module: {
    parser: {
      javascript: {
        reexportExportsPresence: 'error',
      },
    },
  },
};

module.parser.javascript.url

啟用 ?new URL()? 語(yǔ)法解析。

  • 類(lèi)型：?boolean = true | 'relative'?
  • 示例：
    module.exports = {
  module: {
    parser: {
      javascript: {
        url: false, // disable parsing of `new URL()` syntax
      },
    },
  },
};

自 webpack ?5.23.0? 起，?module.parser.javascript.url? 的 ?'relative'? 值可用。當(dāng)使用 'relative' 時(shí)，webpack 將為 ?new URL()? 語(yǔ)法生成相對(duì)的 URL，即結(jié)果 URL 中不包含根 URL：

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

<!-- without 'relative' -->
<img src="file:///path/to/project/dist/c43188443804f1b1f534.svg" rel="external nofollow"  />
  1. 當(dāng)服務(wù)器不知道根 URL 時(shí)，這對(duì) SSR（服務(wù)端渲染）很有用（而且可用節(jié)省一些字節(jié)）。為了使其相同，它也必須用于客戶端構(gòu)建。
  2. 這也適用于 SSG（靜態(tài)網(wǎng)站生成器），mini-css-plugin 和 html-plugin 等通常需要進(jìn)行服務(wù)端渲染。

module.noParse

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

防止 webpack 解析那些任何與給定正則表達(dá)式相匹配的文件。忽略的文件中 不應(yīng)該含有 ?import?, ?require?, ?define? 的調(diào)用，或任何其他導(dǎo)入機(jī)制。忽略大型的 library 可以提高構(gòu)建性能。

webpack.config.js 

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

module.unsafeCache

?boolean? ?function (module)?

緩存模塊請(qǐng)求的解析。?module.unsafeCache? 包含如下幾個(gè)默認(rèn)值：

  • 如果 ?cache? 未被啟用，則默認(rèn)值為 ?false?。
  • 如果 ?cache? 被啟用，并且此模塊的來(lái)自 node_modules，則值為 ?true?，否則為 ?false?。

webpack.config.js 

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

module.rules

?[Rule]?

創(chuàng)建模塊時(shí)，匹配請(qǐng)求的規(guī)則數(shù)組。這些規(guī)則能夠修改模塊的創(chuàng)建方式。 這些規(guī)則能夠?qū)δK(module)應(yīng)用 loader，或者修改解析器(parser)。

Rule

?object?

每個(gè)規(guī)則可以分為三部分 - 條件(condition)，結(jié)果(result)和嵌套規(guī)則(nested rule)。

Rule 條件

條件有兩種輸入值：

  1. resource：資源文件的絕對(duì)路徑。它已經(jīng)根據(jù) ?resolve? 規(guī)則解析。
  2. issuer: 請(qǐng)求者的文件絕對(duì)路徑。是導(dǎo)入時(shí)的位置。

例如： 從 ?app.js? 導(dǎo)入 ?'./style.css'?，resource 是 ?/path/to/style.css?. issuer 是 ?/path/to/app.js?。

在規(guī)則中，屬性 ?test?, ?include?, ?exclude? 和 ?resource? 對(duì) resource 匹配，并且屬性 ?issuer? 對(duì) issuer 匹配。

當(dāng)使用多個(gè)條件時(shí)，所有條件都匹配。

Rule 結(jié)果

規(guī)則結(jié)果只在規(guī)則條件匹配時(shí)使用。

規(guī)則有兩種輸入值：

  1. 應(yīng)用的 loader：應(yīng)用在 resource 上的 loader 數(shù)組。
  2. Parser 選項(xiàng)：用于為模塊創(chuàng)建解析器的選項(xiàng)對(duì)象。

這些屬性會(huì)影響 loader：?loader?, ?options?, ?use?。

也兼容這些屬性：?query?, ?loaders?。

?enforce? 屬性會(huì)影響 loader 種類(lèi)。不論是普通的，前置的，后置的 loader。

?parser? 屬性會(huì)影響 parser 選項(xiàng)。

嵌套的 Rule

可以使用屬性 ?rules? 和 ?oneOf? 指定嵌套規(guī)則。

這些規(guī)則用于在規(guī)則條件(rule condition)匹配時(shí)進(jìn)行取值。每個(gè)嵌套規(guī)則包含它自己的條件。

被解析的順序基于以下規(guī)則：

  1. 父規(guī)則
  2. ?rules?
  3. ?oneOf?

Rule.enforce

?string?

可能的值有：?"pre" | "post"?

指定 loader 種類(lèi)。沒(méi)有值表示是普通 loader。

還有一個(gè)額外的種類(lèi)"行內(nèi) loader"，loader 被應(yīng)用在 import/require 行內(nèi)。

所有一個(gè)接一個(gè)地進(jìn)入的 loader，都有兩個(gè)階段：

  1. Pitching 階段: loader 上的 pitch 方法，按照 ?后置(post)、行內(nèi)(inline)、普通(normal)、前置(pre) ?的順序調(diào)用。
  2. Normal 階段: loader 上的 常規(guī)方法，按照 ?前置(pre)、普通(normal)、行內(nèi)(inline)、后置(post)? 的順序調(diào)用。模塊源碼的轉(zhuǎn)換， 發(fā)生在這個(gè)階段。

所有普通 loader 可以通過(guò)在請(qǐng)求中加上 ?!? 前綴來(lái)忽略（覆蓋）。

所有普通和前置 loader 可以通過(guò)在請(qǐng)求中加上 ?-!? 前綴來(lái)忽略（覆蓋）。

所有普通，后置和前置 loader 可以通過(guò)在請(qǐng)求中加上 ?!!? 前綴來(lái)忽略（覆蓋）。

// 禁用普通 loaders
import { a } from '!./file1.js';

// 禁用前置和普通 loaders
import { b } from '-!./file2.js';

// 禁用所有的 laoders
import { c } from '!!./file3.js';

不應(yīng)使用內(nèi)聯(lián) loader 和 ?!? 前綴，因?yàn)樗欠菢?biāo)準(zhǔn)的。它們可能會(huì)被 loader 生成代碼使用。

Rule.exclude

排除所有符合條件的模塊。如果你提供了 ?Rule.exclude? 選項(xiàng)，就不能再提供 ?Rule.resource?。

Rule.include

引入符合以下任何條件的模塊。如果你提供了 ?Rule.include? 選項(xiàng)，就不能再提供 ?Rule.resource?。

Rule.issuer

一個(gè)?條件?，用來(lái)與被發(fā)出的 request 對(duì)應(yīng)的模塊項(xiàng)匹配。在以下示例中，?a.js? request 的?發(fā)出者(issuer)? 是 index.js 文件的路徑。

index.js 

import A from './a.js';

這個(gè)選項(xiàng)可以用來(lái)將 loader 應(yīng)用到一個(gè)特定模塊或一組模塊的依賴中。

Rule.issuerLayer

允許按 issuer 的 layer 進(jìn)行過(guò)濾/匹配。

webpack.config.js 

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

Rule.layer

?string?

指定模塊應(yīng)放置在哪個(gè) layer。一組模塊可以統(tǒng)一在一個(gè) layer 中，然后可以被用在 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 } ] 的簡(jiǎn)寫(xiě)。

Rule.loaders

?Rule.loaders? 是 ?Rule.use? 的別名。

Rule.mimetype

你可以使用 ?mimetype? 使 rules 配置與 data 的 uri 進(jìn)行匹配。

webpack.config.js 

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

mimetype 已默認(rèn)包含了 ?application/json?，?text/javascript?，?application/javascript?，?application/node? 以及 ?application/wasm?。

Rule.oneOf

?規(guī)則?數(shù)組，當(dāng)規(guī)則匹配時(shí)，只使用第一個(gè)匹配規(guī)則。

webpack.config.js 

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        oneOf: [
          {
            resourceQuery: /inline/, // foo.css?inline
            use: 'url-loader',
          },
          {
            resourceQuery: /external/, // foo.css?external
            use: 'file-loader',
          },
        ],
      },
    ],
  },
};

Rule.options / Rule.query

?Rule.options? 和 ?Rule.query? 是 ?Rule.use: [ { options } ]? 的簡(jiǎn)寫(xiě)。

Rule.parser

解析選項(xiàng)對(duì)象。所有應(yīng)用的解析選項(xiàng)都將合并。

解析器(parser)可以查閱這些選項(xiàng)，并相應(yīng)地禁用或重新配置。大多數(shù)默認(rèn)插件， 會(huì)如下解釋值：

  • 將選項(xiàng)設(shè)置為 ?false?，將禁用解析器。
  • 將選項(xiàng)設(shè)置為 ?true?，或不修改將其保留為 ?undefined?，可以啟用解析器。

然而，一些解析器(parser)插件可能不光只接收一個(gè)布爾值。例如，內(nèi)部的 ?NodeStuffPlugin? 插件，可以接收一個(gè)對(duì)象，而不是 ?true?， 來(lái)為特定的規(guī)則添加額外的選項(xiàng)。

示例（默認(rèn)的插件解析器選項(xiàng)）：

module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        parser: {
          amd: false, // 禁用 AMD
          commonjs: false, // 禁用 CommonJS
          system: false, // 禁用 SystemJS
          harmony: false, // 禁用 ES2015 Harmony import/export
          requireInclude: false, // 禁用 require.include
          requireEnsure: false, // 禁用 require.ensure
          requireContext: false, // 禁用 require.context
          browserify: false, // 禁用特殊處理的 browserify bundle
          requireJs: false, // 禁用 requirejs.*
          node: false, // 禁用 __dirname, __filename, module, require.extensions, require.main, 等。
          commonjsMagicComments: false, // 禁用對(duì) CommonJS 的  magic comments 支持
          node: {}, // 在模塊級(jí)別(module level)上重新配置 node 層(layer)
          worker: ["default from web-worker", "..."] // 自定義 WebWorker 對(duì) JavaScript 的處理，其中 "..." 為默認(rèn)值。
        }
      }
    ]
  }
}

如果 ?Rule.type? 的值為 ?asset?，那么 ?Rules.parser? 選項(xiàng)可能是一個(gè)對(duì)象或一個(gè)函數(shù)，其作用可能是將文件內(nèi)容編碼為 Base64，還可能是將其當(dāng)做單獨(dú)文件 emit 到輸出目錄。

如果 ?Rule.type? 的值為 ?asset? 或 ?asset/inline?，那么 ?Rule.generator? 選項(xiàng)可能是一個(gè)描述模塊源編碼方式的對(duì)象，還可能是一個(gè)通過(guò)自定義算法對(duì)模塊源代碼進(jìn)行編碼的函數(shù)。

Rule.parser.dataUrlCondition

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

如果一個(gè)模塊源碼大小小于 ?maxSize?，那么模塊會(huì)被作為一個(gè) Base64 編碼的字符串注入到包中， 否則模塊文件會(huì)被生成到輸出的目標(biāo)目錄中。

webpack.config.js 

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

當(dāng)提供函數(shù)時(shí)，返回 true 值時(shí)告知 webpack 將模塊作為一個(gè) Base64 編碼的字符串注入到包中， 否則模塊文件會(huì)被生成到輸出的目標(biāo)目錄中。

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?

當(dāng) Rule.generator.dataUrl 被用作一個(gè)對(duì)象，你可以配置兩個(gè)屬性：

  • encoding: 當(dāng)被設(shè)置為'base64'，模塊源碼會(huì)用 Baes64 算法 編碼。設(shè)置 encoding 為 false，會(huì)禁用編碼。
  • mimetype: 為數(shù)據(jù)鏈接(data URI)設(shè)置的一個(gè) mimetype 值。默認(rèn)根據(jù)模塊資源后綴設(shè)置。

webpack.config.js 

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

當(dāng)被作為一個(gè)函數(shù)使用，它必須為每個(gè)模塊執(zhí)行且并須返回一個(gè)數(shù)據(jù)鏈接(data 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 寫(xiě)入資源文件, 你可能會(huì)在 SSR 中使用它。

  • 類(lèi)型：?boolean = true?
  • 可用版本：?5.25.0+?
  • 示例：
    module.exports = {
  // …
  module: {
    rules: [
      {
        test: /\.png$/i,
        type: 'asset/resource',
        generator: {
          emit: false,
        },
      },
    ],
  },
};
Rule.generator.filename

Rule.generator.filename

對(duì)某些特定的規(guī)則而言與 output.assetModuleFilename 相同. 覆蓋了 output.assetModuleFilename 選項(xiàng)并且僅與 asset 和 asset/resource 模塊類(lèi)型一同起作用。

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

對(duì)指定的資源模式指定 ?publicPath?。

  • 類(lèi)型：?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

將靜態(tài)資源輸出到相對(duì)于 'output.path' 的指定文件夾中。只有當(dāng) 'publicPath' 被用來(lái)匹配文件夾結(jié)構(gòu)時(shí)才會(huì)需要設(shè)置該配置。

  • 類(lèi)型：?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

?條件?會(huì)匹配 resource。

Rule.resourceQuery

與資源查詢相匹配的 ?Condition?。此選項(xiàng)用于測(cè)試請(qǐng)求字符串的查詢部分（即從問(wèn)號(hào)開(kāi)始）。如果你需要通過(guò) ?import Foo from './foo.css?inline'? 導(dǎo)入 Foo，則需符合以下條件：

webpack.config.js 

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        resourceQuery: /inline/,
        use: 'url-loader',
      },
    ],
  },
};

Rule.parser.parse

?function(input) => string | object?

如果 ?Rule.type? 被設(shè)置成 ?'json'?，那么 ?Rules.parser.parse? 選擇可能會(huì)是一個(gè)方法，該方法實(shí)現(xiàn)自定義的邏輯，以解析模塊的源和并將它轉(zhuǎn)換成 JavaScript ?對(duì)象?。 它可能在沒(méi)有特定加載器的時(shí)候，對(duì)將 ?toml?, ?yaml? 和其它非 JSON 文件導(dǎo)入成導(dǎo)入非常有用：

webpack.config.js 

const toml = require('toml');

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

Rule.rules

規(guī)則數(shù)組，當(dāng)規(guī)則匹配時(shí)使用。

Rule.scheme

匹配使用的 schema，例如 data，http。

  • 類(lèi)型：?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

引入所有通過(guò)斷言測(cè)試的模塊。如果你提供了一個(gè) Rule.test 選項(xiàng)，就不能再提供 Rule.resource。詳細(xì)請(qǐng)查看 Rule.resource 和 Condition.test。

Rule.type

?string?

可設(shè)置值: ?'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | 'json' | 'webassembly/sync' | 'webassembly/async' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline'?

?Rule.type? 設(shè)置類(lèi)型用于匹配模塊。它防止了 ?defaultRules? 和它們的默認(rèn)導(dǎo)入行為發(fā)生。例如，如果你想 通過(guò)自定義 loader 加載一個(gè) ?.json? 文件，你會(huì)需要將 ?type? 設(shè)置為 ?javascript/auto? 以繞過(guò) webpack 內(nèi)置的 json 導(dǎo)入。 （詳參v4.0 更新日志）

webpack.config.js 

module.exports = {
  //...
  module: {
    rules: [
      //...
      {
        test: /\.json$/,
        type: 'javascript/auto',
        loader: 'custom-json-loader',
      },
    ],
  },
};
關(guān)于 asset* 類(lèi)型詳參 資源模塊指南 。

Rule.use

?[UseEntry]? ?function(info)?

?[UseEntry]?

?Rule.use? 可以是一個(gè)應(yīng)用于模塊的 UseEntries 數(shù)組。每個(gè)入口(entry)指定使用一個(gè) loader。

傳遞字符串（如：?use: [ 'style-loader' ]?）是 loader 屬性的簡(jiǎn)寫(xiě)方式（如：?use: [ { loader: 'style-loader'} ]?）。

Loaders 可以通過(guò)傳入多個(gè) loaders 以達(dá)到鏈?zhǔn)秸{(diào)用的效果，它們會(huì)從右到左被應(yīng)用（從最后到最先配置）。

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? 也可以是一個(gè)函數(shù)，接受對(duì)象參數(shù)，描述被加載的模塊，而且必須 返回 ?UseEntry? 元素的數(shù)組。

?info? 對(duì)象參數(shù)有以下的字段：

  • ?compiler?: 當(dāng)前 webpack 的編譯器（可以是 undefined 值）
  • ?issuer?: 模塊的路徑，該元素正在導(dǎo)入一個(gè)被加載的模塊(resource)
  • ?realResource?: 總會(huì)是被加載模塊的路徑
  • ?resource?: 被加載的模塊路徑，它常常與 ?realResource? 相等，只有當(dāng)資源名稱(chēng)被 request 字符串中的 ?!=!? 覆蓋時(shí)才不相等

相同的作為數(shù)組的快捷方式可以用作返回值（如 ?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),
                  },
                },
              ],
            },
          },
        ],
      },
    ],
  },
};

Rule.resolve

模塊解析可以在模塊層被配置。resolve 配置頁(yè)面可查看所有可用的配置。 所有被應(yīng)用的 resolve 選項(xiàng)被更高層級(jí)的resolve配置合并。

例如，假設(shè)我們有一個(gè)入口文件在 ?./src/index.js?, ?./src/footer/default.js? 和一個(gè)? ./src/footer/overridden.js?， 用以論證模塊層級(jí)的解析。

./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',
    },
  },
};

當(dāng)用該配置創(chuàng)建一個(gè)包，?console.log(footer)? 會(huì)輸出 'default footer'。讓我們?yōu)?nbsp;?.js? 文件設(shè)置 ?Rule.resolve?，以及 ?footer? 作為 ?overridden.js? 的別名。

webpack.js.org 

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

當(dāng)用該配置創(chuàng)建一個(gè)包，?console.log(footer)? 會(huì)輸出 'overridden footer'。

resolve.fullySpecified

?boolean = true?

啟用后，你若在 ?.mjs? 文件或其他 .js 文件中導(dǎo)入模塊，并且它們最近的 package.json 中包含 "type" 字段，其值為 "module"時(shí)，你應(yīng)為此文件提供擴(kuò)展名，否則 webpack 會(huì)提示 Module not found 的錯(cuò)誤且編譯失敗。并且 webpack 不會(huì)解析 resolve.mainFiles 中定義的文件目錄，你必須自己指定文件名。

webpack.config.js

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

Condition

條件可以是這些之一：

  • 字符串：匹配輸入必須以提供的字符串開(kāi)始。是的。目錄絕對(duì)路徑或文件絕對(duì)路徑。
  • 正則表達(dá)式：test 輸入值。
  • 函數(shù)：調(diào)用輸入的函數(shù)，必須返回一個(gè)真值(truthy value)以匹配。
  • 條件數(shù)組：至少一個(gè)匹配條件。
  • 對(duì)象：匹配所有屬性。每個(gè)屬性都有一個(gè)定義行為。

?{ and: [Condition] }?：必須匹配數(shù)組中的所有條件

?{ or: [Condition] }?：匹配數(shù)組中任何一個(gè)條件

?{ not: [Condition] }?：必須排除這個(gè)條件

示例: 

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)

object

必須有一個(gè) loader 屬性是字符串。它使用 loader 解析選項(xiàng)（resolveLoader），相對(duì)于配置中的 context 來(lái)解析。

可以有一個(gè) options 屬性為字符串或?qū)ο?。值可以傳遞到 loader 中，將其理解為 loader 選項(xiàng)。

由于兼容性原因，也可能有 query 屬性，它是 options 屬性的別名。使用 options 屬性替代。

注意，webpack 需要生成資源和所有 loader 的獨(dú)立模塊標(biāo)識(shí)，包括選項(xiàng)。 它嘗試對(duì)選項(xiàng)對(duì)象使用 JSON.stringify。這在 99.9% 的情況下是可以的， 但是如果將相同的 loader 應(yīng)用于相同資源的不同選項(xiàng)，并且選項(xiàng)具有一些帶字符的值，則可能不是唯一的。

如果選項(xiàng)對(duì)象不被字符化（例如循環(huán) JSON），它也會(huì)中斷。因此，你可以在選項(xiàng)對(duì)象使用 ident 屬性， 作為唯一標(biāo)識(shí)符。

webpack.config.js 

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

?function(info)?

UseEntry 也可以是一個(gè)函數(shù)，接受對(duì)象參數(shù)，描述被加載的模塊，而且必須返回一個(gè)參數(shù)對(duì)象。這可用于按模塊更改 loader 選項(xiàng)。

info 對(duì)象參數(shù)有以下的字段：

  • compiler: 當(dāng)前 webpack 的編譯器（可以是 undefined 值）
  • issuer: 模塊的路徑，該元素正在導(dǎo)入一個(gè)被加載的模塊(resource)
  • realResource: 總會(huì)是被加載模塊的路徑
  • resource: 被加載的模塊路徑，它常常與 realResource 相等，只有當(dāng)資源名稱(chēng)被 request 字符串中的 !=! 覆蓋時(shí)才不相等

webpack.config.js 

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

模塊上下文(Module Contexts)

這些選項(xiàng)描述了當(dāng)遇到動(dòng)態(tài)依賴時(shí)，創(chuàng)建上下文的默認(rèn)設(shè)置。

例如，未知的(unknown) 動(dòng)態(tài)依賴：require。

例如，表達(dá)式(expr) 動(dòng)態(tài)依賴：require(expr)。

例如，包裹的(wrapped) 動(dòng)態(tài)依賴：require('./templates/' + expr)。

以下是其默認(rèn)值的可用選項(xiàng)

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

幾個(gè)用例：

  • 動(dòng)態(tài)依賴的警告：wrappedContextCritical: true。
  • require(expr) 應(yīng)該包含整個(gè)目錄：exprContextRegExp: /^\.\//
  • require("./templates/" + expr) 不應(yīng)該包含默認(rèn)子目錄：wrappedContextRecursive: false
  • strictExportPresence 將缺失的導(dǎo)出提示成錯(cuò)誤而不是警告
  • 為部分動(dòng)態(tài)依賴項(xiàng)設(shè)置內(nèi)部正則表達(dá)式：wrappedContextRegExp: /\\.\\*/


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)