在线文档教程

模块 | Module

模块

这些选项确定如何处理项目中不同类型的模块。

module.noParse

RegExp | [RegExp]

RegExp | [RegExp] | function (since webpack 3.0.0)

防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中不应该含有 import, require, define 的调用,或任何其他导入机制。忽略大型的 library 可以提高构建性能。

noParse: /jquery|lodash/ // since webpack 3.0.0 noParse: function(content) { return /jquery|lodash/.test(content }

module.rules

array

创建模块时,匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块 ( module ) 应用 loader,或者修改解析器(parser)。

规则

每个规则可以分为三部分 - 条件 (condition),结果 (result) 和嵌套规则 (nested rule) 。

规则条件

有两个输入值的条件:

1.resource:请求文件的绝对路径。它已经根据 resolve 规则解析。

2.issuer : 被请求资源( requested the resource )的模块文件的绝对路径。是导入时的位置。

例如:app.js 导入 './style.css',resource 是 /path/to/style.css. issuer 是 /path/to/app.js

在规则中,属性 test, include, excluderesourceresource 匹配,并且属性 issuerissuer 匹配。

当使用多个条件时,所有条件都匹配。

小心!resource 是文件的_解析_路径,这意味着符号链接的资源是真正的路径,_而不是_符号链接位置。在使用工具来符号链接包的时候(如 npm link)比较好记,像 /node_modules/ 等常见条件可能会不小心错过符号链接的文件。注意,可以通过 resolve.symlinks 关闭符号链接解析(以便将资源解析为符号链接路径)。

规则结果

规则结果仅在规则条件匹配时使用。

规则有两个输出值:

1. 应用的 loader:应用在 resource 上的 loader 数组。

2. Parser 选项:用于为模块创建解析器的选项对象。

这些属性影响loaders:loaderoptionsuse

对于兼容性还有这些属性:queryloaders

enforce 属性会影响 loader 种类。不论是普通的,前置的,后置的 loader。

parser属性影响解析器选项。

嵌套规则

可以在属性rules和属性oneOf下指定嵌套规则。

这些规则在规则条件匹配时进行评估。

Rule.enforce

可能的值: "pre" | "post"

指定 loader 种类。没有值表示是普通 loader。

还有一个额外的类别“内嵌式loaders”,这些装载机适用于进口/需求内联。

所有loaders按顺序排序pre, inline, normal, post并按此顺序使用。

所有普通 loader 可以通过在请求中加上 ! 前缀来忽略(覆盖)。

所有普通和前置 loader 可以通过在请求中加上 -! 前缀来忽略(覆盖)。

所有普通,后置和前置 loader 可以通过在请求中加上 !! 前缀来忽略(覆盖)。

不应该使用行内 loader 和 ! 前缀,因为它们是非标准的。它们可在由 loader 生成的代码中使用。

Rule.exclude

Rule.excludeRule.resource.exclude 的简写。如果你提供了 Rule.exclude 选项,就不能再提供 Rule.resource。详细请查看 Rule.resourceCondition.exclude

Rule.include

Rule.includeRule.resource.include 的简写。如果你提供了 Rule.include 选项,就不能再提供 Rule.resource。详细请查看 Rule.resourceCondition.include

Rule.issuer

一个条件,用来与被发布的 request 对应的模块项匹配。在以下示例中,a.js request 的发布者(issuer)是 index.js 文件的路径。

index.js

import A from './a.js'

这个选项可以用来将 loader 应用到一个特定模块或一组模块的依赖中。

Rule.loader

Rule.loaderRule.use: [ { loader } ] 的简写。详细请查看 Rule.useUseEntry.loader

Rule.loaders

此选项已弃用,以支持Rule.use

Rule.loaders别名为Rule.use。详情请参阅Rule.use

Rule.oneOf

规则数组,当规则匹配时,只使用第一个匹配规则

{ test: /.css$/, oneOf: [ { resourceQuery: /inline/, // foo.css?inline use: 'url-loader' }, { resourceQuery: /external/, // foo.css?external use: 'file-loader' } ] }

Rule.options / Rule.query

Rule.optionsRule.queryRule.use: [ { options } ] 的简写。详细请查看 Rule.useUseEntry.options

由于需要支持 Rule.optionsUseEntry.optionsRule.useRule.query 已废弃。

Rule.parser

解析选项对象。所有应用的解析选项都将合并。

解析器( parser )可以查阅这些选项,并相应地禁用或重新配置。大多数默认插件,会如下解释值:

  • 将选项设置为 false,将禁用解析器。

  • 将选项设置为 true,或不修改将其保留为 undefined,可以启用解析器。

然而,一些解析器( parser )插件可能不光只接收一个布尔值。例如,内部的 NodeStuffPlugin 差距,可以接收一个对象,而不是 true,来为特定的规则添加额外的选项。

示例(默认插件的解析器选项):

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. node: {...} // reconfigure node layer on module level }

Rule.resource

条件会匹配 resource。既可以提供 Rule.resource 选项,也可以使用快捷选项 Rule.testRule.excludeRule.include。在 Rule 条件 中查看详细。

Rule.resourceQuery

与资源查询匹配的条件。 此选项用于根据请求字符串的查询部分(即从问号开始)进行测试。 如果您要从 './foo.css?inline'中导入Foo,则以下条件将匹配:

{ test: /.css$/, resourceQuery: /inline/, use: 'url-loader' }

Rule.rules

Rules规则匹配时也使用该数组。

Rule.test

Rule.testRule.resource.test 的简写。如果你提供了一个 Rule.test 选项,就不能再提供 Rule.resource。详细请查看 Rule.resourceCondition.test

Rule.use

应用于模块的 UseEntries 列表。每个入口(entry)指定使用一个 loader。

传递字符串(如:use: [ "style-loader" ])是 loader 属性的简写方式(如:use: [ { loader: "style-loader "} ])。

Loaders 可以通过传递多个装载机进行链接,这些 Loaders 将从右到左应用(最后到第一个配置)。

use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'less-loader', options: { noIeCompat: true } } ]

有关详细信息,请参阅UseEntry。

Condition

条件可以是下列之一:

  • 字符串:匹配输入必须以提供的字符串开头。I. e。绝对目录路径或文件的绝对路径。

  • 正则表达式:test 输入值。

  • 调用输入的函数,必须返回一个真值(truthy value)以匹配。

  • 条件数组:至少一个匹配条件。

  • 对象:匹配所有属性。每个属性都有一个定义行为。

{ test: Condition }:匹配特定条件。一般是提供一个正则表达式或正则表达式的数组,但这不是强制的。

{ include: Condition }:匹配特定条件。一般是提供一个字符串或者字符串数组,但这不是强制的。

{ exclude: Condition }:排除特定条件。一般是提供一个字符串或字符串数组,但这不是强制的

{ and: [Condition] }:必须匹配数组中的所有条件

{ or: [Condition] }:匹配数组中任何一个条件

{ not: [Condition] }:必须排除所有条件

例:

{ test: /\.css$/, include: [ path.resolve(__dirname, "app/styles"), path.resolve(__dirname, "vendor/styles") ] }

UseEntry

object

必须有一个 loader 属性是字符串。它使用 loader 解析选项(resolveLoader),相对于配置中的 context 来解析。

为了兼容性,查询属性也是可能的,这是options属性的别名。 改用options属性。

例:

{ loader: "css-loader", options: { modules: true } }

注意,webpack 需要生成资源和所有 loader 的独立模块标识,包括选项。它尝试对选项对象使用 JSON.stringify。这在 99.9% 的情况下是可以的,但是如果将相同的 loader 应用于相同资源的不同选项,并且选项具有一些带字符的值,则可能不是唯一的。

如果选项对象不被字符化(例如循环 JSON),它也会中断。因此,你可以在选项对象使用 ident 属性,作为唯一标识符。

模块上下文

避免使用这些选项,因为它们已废弃,并将很快删除。

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

例如,未知的(unknown) 动态依赖:require

例如,表达式(expr) 动态依赖:require(expr)

例如,包裹的(wrapped) 动态依赖:require("./templates/" + expr)

以下是可用的选项及其默认值

module: { exprContextCritical: true, exprContextRecursive: true, exprContextRegExp: false, exprContextRequest: ".", unknownContextCritical: true, unknownContextRecursive: true, unknownContextRegExp: false, unknownContextRequest: ".", wrappedContextCritical: false wrappedContextRecursive: true, wrappedContextRegExp: /.*/, strictExportPresence: false // since webpack 2.3.0 }

你可以使用 ContextReplacementPlugin 来修改这些单个依赖的值。这也会删除警告。

几个用例:

  • 动态依赖的警告:wrappedContextCritical: true

  • require(expr) 应该包含整个目录:exprContextRegExp: /^\.\//

  • require("./templates/" + expr) 不应该包含默认子目录:wrappedContextRecursive: false

  • strictExportPresence 使缺少的导出出现错误而不是警告