解析

这些选项更改模块解析方式。Webpack 提供合理的默认值，但可以详细更改解析。请参阅 模块解析 以获取有关解析器工作原理的更多说明。

resolve

object

配置模块解析方式。例如，在 ES2015 中调用 import 'lodash' 时，resolve 选项可以更改 webpack 查找 'lodash' 的位置（请参阅 modules）。

webpack.config.js

module.exports = {
  //...
  resolve: {
    // configuration options
  },
};

resolve.alias

object

创建别名以更轻松地import或require某些模块。例如，为常用的 src/ 文件夹设置别名

webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};

现在，在导入时不再使用相对路径，如下所示

import Utility from '../../utilities/utility';

可以使用别名

import Utility from 'Utilities/utility';

也可以在给定对象的键后添加一个尾随 $ 来表示完全匹配

webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      xyz$: path.resolve(__dirname, 'path/to/file.js'),
    },
  },
};

将产生以下结果

import Test1 from 'xyz'; // Exact match, so path/to/file.js is resolved and imported
import Test2 from 'xyz/file.js'; // Not an exact match, normal resolution takes place

下表说明了其他情况

如果在 package.json 中定义，index.js 可能会解析为另一个文件。

/abc/node_modules 也可以解析为 /node_modules。

module.exports = {
  //...
  resolve: {
    alias: {
      _: [
        path.resolve(__dirname, 'src/utilities/'),
        path.resolve(__dirname, 'src/templates/'),
      ],
    },
  },
};

将 resolve.alias 设置为 false 将告诉 webpack 忽略模块。

module.exports = {
  //...
  resolve: {
    alias: {
      'ignored-module': false,
      './ignored-module': false,
    },
  },
};

resolve.aliasFields

[字符串]：['浏览器']

指定一个字段，例如 浏览器，根据 此规范 进行解析。

webpack.config.js

module.exports = {
  //...
  resolve: {
    aliasFields: ['browser'],
  },
};

resolve.cacheWithContext

布尔值

如果启用了不安全的缓存，则在缓存键中包含 request.context。enhanced-resolve 模块会考虑此选项。当提供 resolve 或 resolveLoader 插件时，解析缓存中的 context 会被忽略。这解决了性能回归问题。

resolve.conditionNames

字符串数组

用于 exports 字段 的条件名称，该字段定义包的入口点。

webpack.config.js

module.exports = {
  //...
  resolve: {
    conditionNames: ['require', 'node'],
  },
};

Webpack 将匹配列在 resolve.conditionNames 数组中的 导出条件。

exports 字段中的键顺序很重要。在条件匹配期间，较早的条目具有较高优先级，并优先于较晚的条目。

例如，

package.json

{
  "name": "foo",
  "exports": {
    ".": {
      "import": "./index-import.js",
      "require": "./index-require.js",
      "node": "./index-node.js"
    },
    "./bar": {
      "node": "./bar-node.js",
      "require": "./bar-require.js"
    },
    "./baz": {
      "import": "./baz-import.js",
      "node": "./baz-node.js"
    }
  }
}

webpack.config.js

module.exports = {
  //...
  resolve: {
    conditionNames: ['require', 'node'],
  },
};

导入

• 'foo' 将解析为 'foo/index-require.js'
• 'foo/bar' 将解析为 'foo/bar-node.js'，因为在条件导出对象中 "node" 键位于 "require" 键之前。
• 'foo/baz' 将解析为 'foo/baz-node.js'

resolve.descriptionFiles

[字符串] = ['package.json']

用于描述的 JSON 文件。

webpack.config.js

module.exports = {
  //...
  resolve: {
    descriptionFiles: ['package.json'],
  },
};

resolve.enforceExtension

布尔值 = false

如果为 true，则不允许无扩展名的文件。因此，默认情况下，如果 ./foo 有 .js 扩展名，则 require('./foo') 有效，但启用此项后，只有 require('./foo.js') 才有效。

webpack.config.js

module.exports = {
  //...
  resolve: {
    enforceExtension: false,
  },
};

resolve.extensionAlias

object

将扩展名映射到扩展名别名的对象。

webpack.config.js

module.exports = {
  //...
  resolve: {
    extensionAlias: {
      '.js': ['.ts', '.js'],
      '.mjs': ['.mts', '.mjs'],
    },
  },
};

resolve.extensions

[字符串] = ['.js', '.json', '.wasm']

按顺序尝试解析这些扩展名。如果多个文件具有相同的名称但扩展名不同，webpack 将解析数组中首先列出的扩展名，并跳过其余扩展名。

webpack.config.js

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.json', '.wasm'],
  },
};

这正是用户在导入时可以省略扩展名的原因

import File from '../path/to/file';

请注意，像上面那样使用 resolve.extensions 将覆盖默认数组，这意味着 webpack 将不再尝试使用默认扩展名解析模块。但是，你可以使用 '...' 访问默认扩展名

module.exports = {
  //...
  resolve: {
    extensions: ['.ts', '...'],
  },
};

resolve.fallback

object

当常规解析失败时，重定向模块请求。

webpack.config.js

module.exports = {
  //...
  resolve: {
    fallback: {
      abc: false, // do not include a polyfill for abc
      xyz: path.resolve(__dirname, 'path/to/file.js'), // include a polyfill for xyz
    },
  },
};

Webpack 5 不再自动填充 Node.js 核心模块，这意味着如果你在浏览器或类似环境中运行的代码中使用它们，则必须从 npm 安装兼容模块并自己包含它们。以下是 webpack 在 webpack 5 之前使用过的填充列表

module.exports = {
  //...
  resolve: {
    fallback: {
      assert: require.resolve('assert'),
      buffer: require.resolve('buffer'),
      console: require.resolve('console-browserify'),
      constants: require.resolve('constants-browserify'),
      crypto: require.resolve('crypto-browserify'),
      domain: require.resolve('domain-browser'),
      events: require.resolve('events'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      os: require.resolve('os-browserify/browser'),
      path: require.resolve('path-browserify'),
      punycode: require.resolve('punycode'),
      process: require.resolve('process/browser'),
      querystring: require.resolve('querystring-es3'),
      stream: require.resolve('stream-browserify'),
      string_decoder: require.resolve('string_decoder'),
      sys: require.resolve('util'),
      timers: require.resolve('timers-browserify'),
      tty: require.resolve('tty-browserify'),
      url: require.resolve('url'),
      util: require.resolve('util'),
      vm: require.resolve('vm-browserify'),
      zlib: require.resolve('browserify-zlib'),
    },
  },
};

resolve.mainFields

[string]

从 npm 包中导入时，例如 import * as D3 from 'd3'，此选项将确定其 package.json 中哪些字段被选中。默认值将根据 webpack 配置中指定的 target 而有所不同。

当 target 属性设置为 webworker、web 或未指定时

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFields: ['browser', 'module', 'main'],
  },
};

对于任何其他目标（包括 node）

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFields: ['module', 'main'],
  },
};

例如，考虑一个名为 upstream 的任意库，其 package.json 包含以下字段

{
  "browser": "build/upstream.js",
  "module": "index"
}

当我们 import * as Upstream from 'upstream' 时，这实际上将解析为 browser 属性中的文件。browser 属性优先，因为它是 mainFields 中的第一项。同时，由 webpack 捆绑的 Node.js 应用程序将首先尝试使用 module 字段中的文件进行解析。

resolve.mainFiles

[字符串] = ['index']

在解析目录时要使用的文件名。

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFiles: ['index'],
  },
};

resolve.exportsFields

[字符串] = ['exports']

package.json 中用于解析模块请求的字段。有关更多信息，请参阅 package-exports 指南。

webpack.config.js

module.exports = {
  //...
  resolve: {
    exportsFields: ['exports', 'myCompanyExports'],
  },
};

resolve.modules

[字符串] = ['node_modules']

告诉 webpack 在解析模块时应该搜索哪些目录。

绝对路径和相对路径都可以使用，但请注意它们的行为会有些不同。

相对路径的扫描方式类似于 Node 扫描 node_modules 的方式，通过查看当前目录及其祖先目录（即 ./node_modules、../node_modules 等）。

对于绝对路径，它只会搜索给定的目录。

webpack.config.js

module.exports = {
  //...
  resolve: {
    modules: ['node_modules'],
  },
};

如果要添加一个搜索目录，该目录优先于 node_modules/

webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
};

resolve.unsafeCache

RegExp [RegExp] boolean: true

启用激进但不安全的模块缓存。传递 true 将缓存所有内容。

webpack.config.js

module.exports = {
  //...
  resolve: {
    unsafeCache: true,
  },
};

可以使用正则表达式或正则表达式数组来测试文件路径并仅缓存某些模块。例如，仅缓存实用程序

webpack.config.js

module.exports = {
  //...
  resolve: {
    unsafeCache: /src\/utilities/,
  },
};

resolve.useSyncFileSystemCalls

布尔值

对解析器使用同步文件系统调用。

webpack.config.js

module.exports = {
  //...
  resolve: {
    useSyncFileSystemCalls: true,
  },
};

resolve.plugins

[插件]

应应用的附加解析插件列表。它允许使用诸如 DirectoryNamedWebpackPlugin 之类的插件。

webpack.config.js

module.exports = {
  //...
  resolve: {
    plugins: [new DirectoryNamedWebpackPlugin()],
  },
};

resolve.preferRelative

布尔值

启用后，webpack 将优先将模块请求解析为相对请求，而不是使用来自 node_modules 目录的模块。

webpack.config.js

module.exports = {
  //...
  resolve: {
    preferRelative: true,
  },
};

src/index.js

// let's say `src/logo.svg` exists
import logo1 from 'logo.svg'; // this is viable when `preferRelative` enabled
import logo2 from './logo.svg'; // otherwise you can only use relative path to resolve logo.svg

// `preferRelative` is enabled by default for `new URL()` case
const b = new URL('module/path', import.meta.url);
const a = new URL('./module/path', import.meta.url);

resolve.preferAbsolute

布尔值

解析时优先使用 resolve.roots 的绝对路径。

webpack.config.js

module.exports = {
  //...
  resolve: {
    preferAbsolute: true,
  },
};

resolve.symlinks

boolean = true

是否将符号链接解析到其符号链接位置。

启用后，符号链接资源将解析为其真实路径，而不是其符号链接位置。请注意，在使用符号链接包的工具（如npm link）时，这可能会导致模块解析失败。

webpack.config.js

module.exports = {
  //...
  resolve: {
    symlinks: true,
  },
};

resolve.cachePredicate

function(module) => boolean

一个函数，它决定是否缓存请求。一个对象被传递给函数，其中包含path和request属性。它必须返回一个布尔值。

webpack.config.js

module.exports = {
  //...
  resolve: {
    cachePredicate: (module) => {
      // additional logic
      return true;
    },
  },
};

resolve.restrictions

[string, RegExp]

一个解析限制列表，用于限制请求可以解析的路径。

webpack.config.js

module.exports = {
  //...
  resolve: {
    restrictions: [/\.(sass|scss|css)$/],
  },
};

resolve.roots

[string]

一个目录列表，其中解析了以“/”开头的服务器相对 URL 的请求，默认为context配置选项。在非 Windows 系统上，这些请求首先作为绝对路径解析。

webpack.config.js

const fixtures = path.resolve(__dirname, 'fixtures');
module.exports = {
  //...
  resolve: {
    roots: [__dirname, fixtures],
  },
};

resolve.importsFields

[string]

package.json中的字段，用于提供包的内部请求（以#开头的请求被视为内部请求）。

webpack.config.js

module.exports = {
  //...
  resolve: {
    importsFields: ['browser', 'module', 'main'],
  },
};

resolve.byDependency

按模块请求类型配置解析选项。

• 类型：[type: string]: ResolveOptions

• 示例

  module.exports = {
    // ...
    resolve: {
      byDependency: {
        // ...
        esm: {
          mainFields: ['browser', 'module'],
        },
        commonjs: {
          aliasFields: ['browser'],
        },
        url: {
          preferRelative: true,
        },
      },
    },
  };

resolveLoader

object { modules [string] = ['node_modules'], extensions [string] = ['.js', '.json'], mainFields [string] = ['loader', 'main']}

这组选项与上面设置的resolve属性相同，但仅用于解析 webpack 的加载器包。

webpack.config.js

module.exports = {
  //...
  resolveLoader: {
    modules: ['node_modules'],
    extensions: ['.js', '.json'],
    mainFields: ['loader', 'main'],
  },
};