WebPack resolve
WebPack Resolve
这些选项能设置模块如何被解析。webpack 提供合理的认值,但是还是可能会一些解析的细节。关于 resolver 具体如何工作的更多解释说明。
resolve
object
如何解析。例如,当在 ES2015 中 import "lodash",resolve 选项能够对 webpack 查找 "lodash" 的方式去做。
resolve.alias
object
创建 import 或 require 的别名,来确保模块引入变得更简单。例如,一些位于 src/ 夹下的常用模块:
alias: { Utilities: path.resolve(__dirname, 'src/utilities/'), Templates: path.resolve(__dirname, 'src/templates/') }
现在,替换「在导入时使用相对路径」这种方式,就像这样:
import Utility from '../../utilities/utility';
你可以这样使用别名:
import Utility from 'Utilities/utility';
也可以在给定对象的键后的末尾 $,以表示精准匹配:
alias: { xyz$: path.resolve(__dirname, 'path/to/file.js') }
这将产生以下结果:
import Test1 from 'xyz'; // 精确匹配,所以 path/to/file.js 被解析和导入 import Test2 from 'xyz/file.js'; // 非精确匹配,触发普通解析
下面的表格展示了一些其他情况:
如果在 package.json 中定义,index.js 可能会被解析为另。
/abc/node_modules 也可能在 /node_modules 中解析。
resolve.aliasFields
string
指定字段,例如 browser,根据进行解析。认:
aliasFields: ["browser"]
resolve.cacheWithContext
boolean(从 webpack 3.1.0 开始)
如果启用了不安全缓存,请在缓存键(cache key)中引入 request.context。这个选项被 模块考虑在内。从 webpack 3.1.0 开始,在配置了 resolve 或 resolveLoader 时,解析缓存(resolve caching)中的上下文(context)会被忽略。这了衰退的问题。
resolve.descriptionFiles
array
用于描述的 JSON 。认:
descriptionFiles: ["package.json"]
resolve.enforceExtension
boolean
如果是 true,将不允许无扩展名(extension-less)。认如果 ./foo 有 .js 扩展,require('./foo')可以正常运行。但如果启用此选项,只有 require('./foo.js') 能够正常工作。认:
enforceExtension: false
resolve.enforceModuleExtension
boolean
对模块是否需要使用的扩展(例如 loader)。认:
enforceModuleExtension: false
resolve.extensions
array
解析确定的扩展。认值为:
extensions: [".js", ".json"]
能够使在引入模块时不带扩展:
import File from '../path/to/file'
使用此选项,会覆盖认数组,这就意味着 webpack 将不再尝试使用认扩展来解析模块。对于使用其扩展导入的模块,例如,import SomeFile from "./somefile.ext",要想正确的解析,包含“*”的字符串必须包含在数组中。
resolve.mainFields
array
当从 npm 包中导入模块时(例如,import * as D3 from "d3"),此选项将决定在 package.json 中使用哪个字段导入模块。根据 webpack 配置中指定的 target 不同,认值也会有所不同。
当 target 设置为 webworker, web 或者没有指定,认值为:
mainFields: ["browser", "module", "main"]
对于其他任意的 target( node),认值为:
mainFields: ["module", "main"]
例如,D3 的 package.json 含有这些字段:
{ ... main: 'build/d3.Node.js', browser: 'build/d3.js', module: 'index', ...}
这意味着当我们 import * as D3 from "d3",实际从 browser 解析。 browser 是最优先选择的,因为它是 mainFields 的第一项。同时,由 webpack 打包的 Node.js 应用程序认会从 module字段中解析。
resolve.mainFiles
array
解析目录时要使用的名。认:
mainFiles: ["index"]
resolve.modules
array
告诉 webpack 解析模块时应该的目录。
和相对路径都能使用,但是要知道它们之间有一点差异。
通过查看当前目录以及祖先路径(即 ./node_modules, ../node_modules 等等),相对路径将类似于 Node 查找 'node_modules' 的方式进行查找。
使用,将只在给定目录中。
resolve.modules defaults to:
modules: ["node_modules"]
如果你想要目录到模块目录,此目录优先于 node_modules/ :
modules: [path.resolve(__dirname, "src"), "node_modules"]
resolve.unsafeCache
regex array boolean
启用,会主动缓存模块,但并不安全。传递 true 将缓存一切。认:
unsafeCache: true
正则表达式,或正则表达式数组,可以用于匹配路径或只缓存某些模块。例如,只缓存 utilities 模块:
unsafeCache: /src\/utilities/
缓存路径可能在极少数情况下导致失败。
resolve.plugins
应该使用的额外的解析列表。它允许,如 。
plugins: [ new DirectoryNamedWebpackPlugin()]
resolve.symlinks
boolean
是否将符号(symlink)解析到它们的符号位置(symlink location)。认:
启用时,符号(symlink)的资源,将解析为其_真实_路径,而不是其符号(symlink)位置。注意,当使用符号 package 包工具时(如 npm link),可能会导致模块解析失败。
resolve.symlinks 认值为:
symlinks: true
resolve.cachePredicate
function
决定请求是否应该被缓存的。传入带有 path 和 request 的对象。认:
cachePredicate: function() { return true }
resolveLoader
object
这组选项与上面的 resolve 对象的集合相同,但仅用于解析 webpack 的 loader 包。认:
{ modules: [ 'node_modules' ], extensions: [ '.js', '.json' ], mainFields: [ 'loader', 'main' ]}
注意,这里你可以使用别名,并且其他特性类似于 resolve 对象。例如,{ txt: 'raw-loader' } 会使用 raw-loader 去 shim(填充) txt!templates/demo.txt。
resolveLoader.moduleExtensions
array
解析 loader 时,用到扩展名(extensions)/后缀(suffixes)。从 webpack 2 开始,我们强烈建议使用全名,例如 example-loader,以尽可能清晰。然而,如果你确实想省略 -loader,也就是说只使用 example,则可以使用此选项来实现:
moduleExtensions: [ '-loader' ]