模块

这些选项决定了项目中不同类型的模块将如何被处理。

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.js.cn/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 启用魔术注释支持。

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

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 模块，则为 true，否则为 false。

webpack.config.js

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

module.rules

（规则 | 未定义 | 空 | 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

Rules的数组，其中仅在规则匹配时使用第一个匹配的规则。

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 用作对象时，你可以配置两个属性

编码：当设置为 '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

选择不从资产模块中写入资产，你可能希望在服务器端渲染案例中使用它。

类型：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 条件中的详细信息。

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

布尔值

指示模块的哪些部分包含副作用。有关详细信息，请参阅 Tree Shaking。

Rule.test

包括通过测试断言的所有模块。如果您提供 Rule.test 选项，则不能同时提供 Rule.resource。有关详细信息，请参阅 Rule.resource 和 Condition。

Rule.type

字符串

Rule.type 设置匹配模块的类型。这可以防止发生 defaultRules 及其默认导入行为。例如，如果您想通过自定义加载器加载 .json 文件，则需要将 type 设置为 javascript/auto 以绕过 webpack 的内置 json 导入。

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 模块类型的用例。确保启用 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,
            },
          },
        ],
      },
    ],
  },
};

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 深度合并。

例如，假设我们在 ./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 使用加载器解析选项 (resolveLoader) 进行解析。

它可以有一个 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) },
              },
            ],
          },
        }),
      },
    ],
  },
};

模块上下文

这些选项描述在遇到动态依赖项时创建的上下文的默认设置。

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 位贡献者