CD's blog CD's blog
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

CD_wOw

内卷的行情,到不了的梦
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 配置

    • 配置
    • 使用不同语言进行配置(configuration languages)
    • 多种配置类型(configuration types)
    • 入口和上下文(entry and context)
    • 输出(output)
    • 模块(module)
    • 解析(resolve)
      • resolve
      • resolve.alias
      • resolve.aliasFields
      • resolve.cacheWithContext
      • resolve.descriptionFiles
      • resolve.enforceExtension
      • resolve.enforceModuleExtension
      • resolve.extensions
      • resolve.mainFields
      • resolve.mainFiles
      • resolve.modules
      • resolve.unsafeCache
      • resolve.plugins
      • resolve.symlinks
      • resolve.cachePredicate
      • resolveLoader
      • resolveLoader.moduleExtensions
    • 插件(plugins)
    • 开发中 Server(devServer)
    • devtool
    • 构建目标(targets)
    • watch 和 watchOptions
    • 外部扩展(externals)
    • 性能(performance)
    • Node
    • 统计信息(stats)
    • 其它选项(other options)
  • 指南(实例)

  • 《Webpack》笔记
  • 配置
CD_wOw
2020-12-14
目录

解析(resolve)

这些选项能设置模块如何被解析。webpack 提供合理的默认值,但是还是可能会修改一些解析的细节。关于 resolver 具体如何工作的更多解释说明,请查看模块解析 (opens new window)。

# resolve

type: object

配置模块如何解析。例如,当在 ES2015 中调用 import "lodash",resolve 选项能够对 webpack 查找 "lodash" 的方式去做修改(查看模块 (opens new window))。

# resolve.alias

type: object

创建 import 或 require 的别名,来确保模块引入变得更简单。例如,一些位于 src/ 文件夹下的常用模块:

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
  Templates: path.resolve(__dirname, 'src/templates/')
}
1
2
3
4

现在,替换「在导入时使用相对路径」这种方式,就像这样:

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

你可以这样使用别名:

import Utility from 'Utilities/utility';
1

也可以在给定对象的键后的末尾添加 $,以表示精准匹配:

alias: {
  xyz$: path.resolve(__dirname, 'path/to/file.js')
}
1
2
3

这将产生以下结果:

import Test1 from 'xyz'; // 精确匹配,所以 path/to/file.js 被解析和导入
import Test2 from 'xyz/file.js'; // 非精确匹配,触发普通解析
1
2

下面的表格展示了一些其他情况:

别名: import "xyz" import "xyz/file.js"
{} /abc/node_modules/xyz/index.js /abc/node_modules/xyz/file.js
{ xyz: "/abs/path/to/file.js" } /abs/path/to/file.js error
{ xyz$: "/abs/path/to/file.js" } /abs/path/to/file.js /abc/node_modules/xyz/file.js
{ xyz: "./dir/file.js" } /abc/dir/file.js error
{ xyz$: "./dir/file.js" } /abc/dir/file.js /abc/node_modules/xyz/file.js
{ xyz: "/some/dir" } /some/dir/index.js /some/dir/file.js
{ xyz$: "/some/dir" } /some/dir/index.js /abc/node_modules/xyz/file.js
{ xyz: "./dir" } /abc/dir/index.js /abc/dir/file.js
{ xyz: "modu" } /abc/node_modules/modu/index.js /abc/node_modules/modu/file.js
{ xyz$: "modu" } /abc/node_modules/modu/index.js /abc/node_modules/xyz/file.js
{ xyz: "modu/some/file.js" } /abc/node_modules/modu/some/file.js error
{ xyz: "modu/dir" } /abc/node_modules/modu/dir/index.js /abc/node_modules/dir/file.js
{ xyz: "xyz/dir" } /abc/node_modules/xyz/dir/index.js /abc/node_modules/xyz/dir/file.js
{ xyz$: "xyz/dir" } /abc/node_modules/xyz/dir/index.js /abc/node_modules/xyz/file.js

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

/abc/node_modules 也可能在 /node_modules 中解析。

# resolve.aliasFields

type: string

指定一个字段,例如 browser,根据此规范 (opens new window)进行解析。默认:

aliasFields: ["browser"]
1

# resolve.cacheWithContext

type: boolean(从 webpack 3.1.0 开始)

如果启用了不安全缓存,请在缓存键(cache key)中引入 request.context。这个选项被 enhanced-resolve (opens new window) 模块考虑在内。从 webpack 3.1.0 开始,在配置了 resolve 或 resolveLoader 插件时,解析缓存(resolve caching)中的上下文(context)会被忽略。这解决了性能衰退的问题。

# resolve.descriptionFiles

type: array

用于描述的 JSON 文件。默认:

descriptionFiles: ["package.json"]
1

# resolve.enforceExtension

type: boolean

如果是 true,将不允许无扩展名(extension-less)文件。默认如果 ./foo 有 .js 扩展,require('./foo') 可以正常运行。但如果启用此选项,只有 require('./foo.js') 能够正常工作。默认:

enforceExtension: false
1

# resolve.enforceModuleExtension

type: boolean

对模块是否需要使用的扩展(例如 loader)。默认:

enforceModuleExtension: false
1

# resolve.extensions

type: array

自动解析确定的扩展。默认值为:

extensions: [".js", ".json"]
1

能够使用户在引入模块时不带扩展:

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

使用此选项,会覆盖默认数组,这就意味着 webpack 将不再尝试使用默认扩展来解析模块。对于使用其扩展导入的模块,例如,import SomeFile from "./somefile.ext",要想正确的解析,一个包含“*”的字符串必须包含在数组中。

# resolve.mainFields

type: array

当从 npm 包中导入模块时(例如,import * as D3 from "d3"),此选项将决定在 package.json 中使用哪个字段导入模块。根据 webpack 配置中指定的 target (opens new window) 不同,默认值也会有所不同。

当 target 属性设置为 webworker, web 或者没有指定,默认值为:

mainFields: ["browser", "module", "main"]
1

对于其他任意的 target(包括 node),默认值为:

mainFields: ["module", "main"]
1

例如,D3 (opens new window) 的 package.json 含有这些字段:

{
  ...
  main: 'build/d3.Node.js',
  browser: 'build/d3.js',
  module: 'index',
  ...
}
1
2
3
4
5
6
7

这意味着当我们 import * as D3 from "d3",实际从 browser 属性解析文件。在这里 browser 属性是最优先选择的,因为它是 mainFields 的第一项。同时,由 webpack 打包的 Node.js 应用程序默认会从 module 字段中解析文件。

# resolve.mainFiles

解析目录时要使用的文件名。默认:

mainFiles: ["index"]
1

# resolve.modules

type: array

告诉 webpack 解析模块时应该搜索的目录。

绝对路径和相对路径都能使用,但是要知道它们之间有一点差异。

通过查看当前目录以及祖先路径(即 ./node_modules, ../node_modules 等等),相对路径将类似于 Node 查找 'node_modules' 的方式进行查找。

使用绝对路径,将只在给定目录中搜索。

resolve.modules defaults to:

modules: ["node_modules"]
1

如果你想要添加一个目录到模块搜索目录,此目录优先于 node_modules/ 搜索:

modules: [path.resolve(__dirname, "src"), "node_modules"]
1

# resolve.unsafeCache

type: regex array boolean

启用,会主动缓存模块,但并不安全。传递 true 将缓存一切。默认:

unsafeCache: true
1

正则表达式,或正则表达式数组,可以用于匹配文件路径或只缓存某些模块。例如,只缓存 utilities 模块:

unsafeCache: /src\/utilities/
1

修改缓存路径可能在极少数情况下导致失败。

# resolve.plugins

应该使用的额外的解析插件列表。它允许插件,如 DirectoryNamedWebpackPlugin (opens new window)。

plugins: [
  new DirectoryNamedWebpackPlugin()
]
1
2
3

# resolve.symlinks

type: boolean

是否将符号链接(symlink)解析到它们的符号链接位置(symlinklocation)。默认:

启用时,符号链接(symlink)的资源,将解析为其_真实_路径,而不是其符号链接(symlink)位置。注意,当使用符号链接 package 包工具时(如 npm link),可能会导致模块解析失败。

resolve.symlinks 默认值为:

symlinks: true
1

# resolve.cachePredicate

type: function

决定请求是否应该被缓存的函数。函数传入一个带有 path 和 request 属性的对象。默认:

cachePredicate: function() { return true }
1

# resolveLoader

type: object

这组选项与上面的 resolve 对象的属性集合相同,但仅用于解析 webpack 的 loader (opens new window) 包。默认:

{
  modules: [ 'node_modules' ],
  extensions: [ '.js', '.json' ],
  mainFields: [ 'loader', 'main' ]
}
1
2
3
4
5

注意,这里你可以使用别名,并且其他特性类似于 resolve 对象。例如,{ txt: 'raw-loader' } 会使用 raw-loader 去 shim(填充) txt!templates/demo.txt。

# resolveLoader.moduleExtensions

type: array

解析 loader 时,用到扩展名(extensions)/后缀(suffixes)。从 webpack 2 开始,我们强烈建议 (opens new window)使用全名,例如 example-loader,以尽可能清晰。然而,如果你确实想省略 -loader,也就是说只使用 example,则可以使用此选项来实现:

moduleExtensions: [ '-loader' ]
1
编辑 (opens new window)
#Webpack
上次更新: 2021/08/22, 01:09:59
模块(module)
插件(plugins)

← 模块(module) 插件(plugins)→

最近更新
01
gsap动画库学习笔记 - 持续~
06-05
02
远程组件加载方案笔记
05-03
03
小程序使用笔记
03-29
更多文章>
Theme by Vdoing | Copyright © 2020-2023 CD | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式