1. Resolve(解析)

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

module.exports = {
    resolve: {
        alias: '',
        aliasFields: '',
        cacheWithContext: '',
        descriptionFiles: '',
        enforceExtension: '',
        enforceModuleExtension: '',
        extensions: '',
        mainFields: '',
        mainFiles: '',
        modules: '',
        unsafeCache: '',
        plugins: '',
        symlinks: '',
        cachePredicate: '',
        resolveLoader: {
            moduleExtensi
        }
    }
}

1.1. resolve

类型:object

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

1.1.1. resolve.alias

类型:object

创建importrequire的别名,来确保模块引入变得更简单。例如,一些位于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'; // 精确匹配,触发普通解析

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

别名: 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中解析。

1.1.2. resolve.aliasFields

类型:string

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

aliasFields: ["browser"]

1.1.3. resolve.cacheWithContext

类型:boolean

如果启用了不安全的缓存,则在缓存的键中包括request.context。这个选项是由enhanced-resolve模块考虑的。从webpack 3.1.0开始,在解析或提供了resolveLoader插件时,解析缓存中的上下文会被忽略。这解决了性能倒退的问题。

1.1.4. resolve.descriptionFiles

类型:array

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

descriptionFiles: ["package.json"]

1.1.5. resolve.enforceExtension

类型:boolean

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

enforceExtension: false

1.1.6. resolve.enforceModuleExtension

类型:boolean

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

enforceModuleExtension: false

1.1.7. resolve.extensions

类型:array

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

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

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

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

[warning]注:

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

1.1.8. 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"]

例如,D3package.json含有这些字段:

{
  ...
  main: 'build/d3.Node.js',
  browser: 'build/d3.js',
  module: 'index',
  ...
}

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

1.1.9. resolve.mainFiles

类型:array

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

mainFiles: ["index"]

1.1.10. resolve.modules

类型:array

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

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

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

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

默认值:

modules: ["node_modules"]

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

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

1.1.11. resolve.unsafeCache

类型:Regexp | array | boolean

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

unsafeCache: true

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

unsafeCache: /src\/utilities/

1.1.12. resolve.plugins

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

plugins: [
  new DirectoryNamedWebpackPlugin()
]

类型:boolean

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

symlinks: true

1.1.14. resolve.cachePredicate

类型:function

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

cachePredicate: function() { return true }

1.1.15. resolveLoader

类型:object

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

{
  modules: [ 'node_modules' ],
  extensions: [ '.js', '.json' ],
  mainFields: [ 'loader', 'main' ]
}

[info] 注:

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

1.1.16. resolveLoader.moduleExtensions

类型:array

在解析loader使用的扩展/后缀。从版本2开始,我们强烈建议使用完整的名称,例如example-loader,,尽可能清晰地使用。但是,如果您真的想要排除`-loader`位,例如使用example,您可以使用该选项来执行以下操作:

moduleExtensions: [ '-loader' ]

[warning] 注:

尽管可以这样做,但是我们还是强烈建议使用完整的名称。

Copyright © tuzhu008 2017 all right reserved,powered by Gitbook该文件修订时间: 2017-11-19 18:14:00

results matching ""

    No results matching ""