加载中...

模块(Module)

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

module.noParse

RegExp | [RegExp]

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

noParse: /jquery|lodash/

module.rules

array

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

Rule

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

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, exclude 和 resource 对 resource 匹配，并且属性 issuer 对 issuer 匹配。

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

Rule 结果

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

规则有两种输入值：

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

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

这些属性会影响 loader：loader, options, use。

也兼容这些属性：query, loaders。

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

parser 属性会影响 parser 选项。

嵌套的 Rule

可以使用属性 rules 和 oneOf 指定嵌套规则。

这些规则用于在规则条件(rule condition)匹配时进行取值。

Rule.enforce

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

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

还有一个额外的种类"行内 loader"，loader 被应用在 import/require 行内。

所有 loader 通过 后置, 行内, 普通, 前置 排序，并按此顺序使用。

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

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

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

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

Rule.exclude

Rule.exclude 是 Rule.resource.exclude 的简写。详细请查看 Rule.resource 和 Condition.exclude。

Rule.include

Rule.include 是 Rule.resource.include 的简写。详细请查看 Rule.resource 和 Condition.include。

Rule.issuer

条件会匹配 issuer。在 Rule 条件 中查看详细。

Rule.loader

Rule.loader 是 Rule.use: [ { loader } ] 的简写。详细请查看 Rule.use 和 UseEntry.loader。

Rule.loaders

Rule.loaders 是 Rule.use 的别名。详细请查看 Rule.use。

由于兼容性原因而存在。请使用 Rule.use 代替。

Rule.oneOf

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

Rule.options / Rule.query

Rule.options 和 Rule.query 是 Rule.use: [ { options } ] 的简写。详细请查看 Rule.use 和 UseEntry.options。

Rule.query 仅由于兼容性原因而存在。请使用 Rule.options 代替。

Rule.parser

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

为每个不同的解析器选项对象，创建新的解析器，并且插件可以应用在那些依赖解析器选项的插件。许多默认插件，仅在解析器选项属性未设置或为 true 时，应用解析器插件。

示例（默认的插件解析器选项）： 

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 等。
  node: {...} // 在模块级别(module level)上重新配置 [node](/configuration/node) 层(layer)
}

Rule.resource

条件会匹配 resource。在 Rule 条件 中查看详细。

Rule.rules

规则数组，当规则匹配时使用。

Rule.test

Rule.test 是 Rule.resource.test 的简写。详细请查看 Rule.resource 和 Condition.test。

Rule.use

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

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

Loaders can be chained by passing multiple loaders, which will be applied from right to left (last to first configured). 

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

详细请查看 UseEntry。

条件

条件可以是这些之一：

  • 字符串：匹配输入必须以提供的字符串开始。是的。目录绝对路径或文件绝对路径。
  • 正则表达式：test 输入值。
  • 函数：调用输入的函数，必须返回一个真值(truthy value)以匹配。
  • 条件数组：至少一个匹配条件。
  • 对象：匹配所有属性。每个属性都有一个定义行为。

{ test: Condition }：匹配条件。约定了提供一个正则或正则数组，但不是强制的。

{ include: Condition }：匹配条件。约定了提供一个字符串或字符串数组，但不是强制的。

{ exclude: Condition }：不能匹配条件。约定了提供一个字符串或字符串数组，但不是强制的。

{ and: [Condition] }：匹配所有条件

{ or: [Condition] }：匹配任何条件

{ not: Condition }：不能匹配条件

Example: 

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

UseEntry

object

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

可以有一个 options 属性为字符串或对象。值可以传递到 loader 中，将其理解为 loader 选项。

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

Example: 

{
  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: /.*/,
}

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

几个用例：

  • 动态依赖的警告：wrappedContextCritical: true。
  • require(expr) 应该包含整个目录：exprContextRegExp: /^\.\//
  • require("./templates/" + expr) 不应该包含默认子目录：wrappedContextRecursive: false

原文：https://webpack.js.org/configuration/module/

还没有评论.