閱讀(1k) 書簽贊(0) 我要糾錯

Webpack Module(模塊)

2023-05-15 17:40 更新

這些選項決定了如何處理項目中的不同類型的模塊。

module.generator

?5.12.0+?

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

webpack.config.js

module.exports = {
  module: {
    generator: {
      asset: {
        // asseet 模塊的 generator 選項

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

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

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

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

module.parser

?5.12.0+?

類似于 ?module.generator?，你可以用 ?module.parser? 在一個地方配置所有解析器的選項。

webpack.config.js

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

module.parser.javascript

JavaScript parser 的配置項。

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.dynamicImportMode

指定動態(tài)導入的全局模式。

類型：?'eager' | 'weak' | 'lazy' | 'lazy-once'?
可用版本：5.73.0+

示例：

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

module.parser.javascript.dynamicImportPrefetch

指定動態(tài)導入的全局 prefetch。

類型： ?number | boolean?
可用版本：5.73.0+

示例：

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

module.parser.javascript.dynamicImportPreload

指定動態(tài)導入的全局 preload。

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

Enable or disable evaluating ?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
      },
    },
  },
};

自 webpack ?5.23.0? 起，?module.parser.javascript.url? 的 ?'relative'? 值可用。當使用 'relative' 時，webpack 將為 ?new URL()? 語法生成相對的 URL，即結果 URL 中不包含根 URL：

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

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

當服務器不知道根 URL 時，這對 SSR（服務端渲染）很有用（而且可用節(jié)省一些字節(jié)）。為了使其相同，它也必須用于客戶端構建。
這也適用于 SSG（靜態(tài)網(wǎng)站生成器），mini-css-plugin 和 html-plugin 等通常需要進行服務端渲染。

module.noParse

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

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

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]?

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

Rule

?object?

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

Rule 條件

條件有兩種輸入值：

resource：資源文件的絕對路徑。它已經(jīng)根據(jù) ?resolve? 規(guī)則解析。
issuer: 請求者的文件絕對路徑。是導入時的位置。

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

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

當使用多個條件時，所有條件都匹配。

Rule 結果

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

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

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

這些屬性會影響 loader：?loader?, ?options?, ?use?。

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

?enforce? 屬性會影響 loader 種類。不論是普通的，前置的，后置的 loader。

?parser? 屬性會影響 parser 選項。

嵌套的 Rule

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

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

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

父規(guī)則
?rules?
?oneOf?

Rule.enforce

?string?

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

指定 loader 種類。沒有值表示是普通 loader。

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

所有一個接一個地進入的 loader，都有兩個階段：

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

所有普通 loader 可以通過在請求中加上 ?!? 前綴來忽略（覆蓋）。

所有普通和前置 loader 可以通過在請求中加上 ?-!? 前綴來忽略（覆蓋）。

所有普通，后置和前置 loader 可以通過在請求中加上 ?!!? 前綴來忽略（覆蓋）。

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

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

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

不應使用內(nèi)聯(lián) loader 和 ?!? 前綴，因為它是非標準的。它們可能會被 loader 生成代碼使用。

Rule.exclude

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

Rule.include

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

Rule.issuer

一個?條件?，用來與被發(fā)出的 request 對應的模塊項匹配。在以下示例中，?a.js? request 的?發(fā)出者(issuer)? 是 index.js 文件的路徑。

index.js

import A from './a.js';

這個選項可以用來將 loader 應用到一個特定模塊或一組模塊的依賴中。

Rule.issuerLayer

允許按 issuer 的 layer 進行過濾/匹配。

webpack.config.js

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

Rule.layer

?string?

指定模塊應放置在哪個 layer。一組模塊可以統(tǒng)一在一個 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 } ] 的簡寫。

Rule.loaders

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

Rule.mimetype

你可以使用 ?mimetype? 使 rules 配置與 data 的 uri 進行匹配。

webpack.config.js

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

mimetype 已默認包含了 ?application/json?，?text/javascript?，?application/javascript?，?application/node? 以及 ?application/wasm?。

Rule.oneOf

?規(guī)則?數(shù)組，當規(guī)則匹配時，只使用第一個匹配規(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 } ]? 的簡寫。

Rule.parser

解析選項對象。所有應用的解析選項都將合并。

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

將選項設置為 ?false?，將禁用解析器。
將選項設置為 ?true?，或不修改將其保留為 ?undefined?，可以啟用解析器。

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

示例（默認的插件解析器選項）：

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, // 禁用對 CommonJS 的  magic comments 支持
          node: {}, // 在模塊級別(module level)上重新配置 node 層(layer)
          worker: ["default from web-worker", "..."] // 自定義 WebWorker 對 JavaScript 的處理，其中 "..." 為默認值。
        }
      }
    ]
  }
}

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

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

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

當提供函數(shù)時，返回 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'，模塊源碼會用 Baes64 算法編碼。設置 encoding 為 false，會禁用編碼。
mimetype: 為數(shù)據(jù)鏈接(data URI)設置的一個 mimetype 值。默認根據(jù)模塊資源后綴設置。

webpack.config.js

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

當被作為一個函數(shù)使用，它必須為每個模塊執(zhí)行且并須返回一個數(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 寫入資源文件, 你可能會在 SSR 中使用它。

類型：?boolean = true?
可用版本：?5.25.0+?

示例：

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

Rule.generator.filename

對某些特定的規(guī)則而言與 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

將靜態(tài)資源輸出到相對于 '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

?條件?會匹配 resource。

Rule.resourceQuery

與資源查詢相匹配的 ?Condition?。此選項用于測試請求字符串的查詢部分（即從問號開始）。如果你需要通過 ?import Foo from './foo.css?inline'? 導入 Foo，則需符合以下條件：

webpack.config.js

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

Rule.parser.parse

?function(input) => string | object?

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

webpack.config.js

const toml = require('toml');

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

Rule.rules

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

Rule.scheme

匹配使用的 schema，例如 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.test。

Rule.type

?string?

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

webpack.config.js

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

關于 asset* 類型詳參資源模塊指南。

Rule.use

?[UseEntry]? ?function(info)?

?[UseEntry]?

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

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

Loaders 可以通過傳入多個 loaders 以達到鏈式調(diào)用的效果，它們會從右到左被應用（從最后到最先配置）。

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

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

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

相同的作為數(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 配置頁面可查看所有可用的配置。所有被應用的 resolve 選項被更高層級的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',
    },
  },
};

當用該配置創(chuàng)建一個包，?console.log(footer)? 會輸出 'default footer'。讓我們?yōu)?nbsp;?.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',
          },
        },
      },
    ],
  },
};

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

resolve.fullySpecified

?boolean = true?

啟用后，你若在 ?.mjs? 文件或其他 .js 文件中導入模塊，并且它們最近的 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
        },
      },
    ],
  },
};

Condition

條件可以是這些之一：

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

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

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

?{ 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)

object

必須有一個 loader 屬性是字符串。它使用 loader 解析選項（resolveLoader），相對于配置中的 context 來解析。

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

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

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

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

webpack.config.js

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

?function(info)?

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

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

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

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)

這些選項描述了當遇到動態(tài)依賴時，創(chuàng)建上下文的默認設置。

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

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

例如，包裹的(wrapped) 動態(tài)依賴：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,
  },
};

幾個用例：

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

以上內(nèi)容是否對您有幫助：

← Webpack Output(輸出)

Webpack Resolve(解析) →

寫筆記

我要補充

查看完整版筆記

国产chinesehdxxxx野外,国产av无码专区亚洲av琪琪,播放男人添女人下边视频,成人国产精品一区二区免费看,chinese丰满人妻videos

Webpack Module(模塊)

module.generator

module.parser

module.parser.javascript

module.parser.javascript.commonjsMagicComments

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

Rule 條件

Rule 結果

嵌套的 Rule

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

Rule.use

Rule.resolve

resolve.fullySpecified

Condition

UseEntry

模塊上下文(Module Contexts)