text: (window.webpackJsonp=window.webpackJsonp||[]).push([[63],{65:function(s,t,a){"use strict";a.r(t);var e=a(0),n=Object(e.a)({},function(){var s=this.$createElement;this._self._c;return this._m(0)},[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"content"},[a("h1",{attrs:{id:"_2-4-resolve"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2-4-resolve","aria-hidden":"true"}},[s._v("#")]),s._v(" 2-4 Resolve")]),a("p",[s._v("Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块，Resolve 配置 Webpack 如何寻找模块所对应的文件。 Webpack 内置 JavaScript 模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你也可以根据自己的需要修改默认的规则。")]),a("h2",{attrs:{id:"alias"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alias","aria-hidden":"true"}},[s._v("#")]),s._v(" alias")]),a("p",[a("code",[s._v("resolve.alias")]),s._v(" 配置项通过别名来把原导入路径映射成一个新的导入路径。例如使用以下配置：")]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// Webpack alias 配置")]),s._v("\nresolve"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  alias"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    components"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"./src/components/"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),a("p",[s._v("当你通过 "),a("code",[s._v("import Button from 'components/button'")]),s._v(" 导入时，实际上被 alias 等价替换成了 "),a("code",[s._v("import Button from './src/components/button'")]),s._v("。")]),a("p",[s._v("以上 "),a("code",[s._v("alias")]),s._v(" 配置的含义是把导入语句里的 "),a("code",[s._v("components")]),s._v(" 关键字替换成 "),a("code",[s._v("./src/components/")]),s._v("。")]),a("p",[s._v("这样做可能会命中太多的导入语句，alias 还支持 "),a("code",[s._v("$")]),s._v(" 符号来缩小范围到只命中以关键字结尾的导入语句：")]),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[s._v("resolve"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  alias"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n    "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'react$'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'/path/to/react.min.js'")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),a("p",[a("code",[s._v("react$")]),s._v(" 只会命中以 "),a("code",[s._v("react")]),s._v("结尾的导入语句，即只会把 "),a("code",[s._v("import 'react'")]),s._v(" 关键字替换成 "),a("code",[s._v("import '/path/to/react.min.js'")]),s._v("。")]),a("h2",{attrs:{id:"mainfields"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mainfields","aria-hidden":"true"}},[s._v("#")]),s._v(" mainFields")]),a("p",[s._v("有一些第三方模块会针对不同环境提供几分代码。 例如分别提供采用 "),a("code",[s._v("ES5")]),s._v(" 和 "),a("code",[s._v("ES6")]),s._v(" 的 2 份代码，这 2 份代码的位置写在 "),a("code",[s._v("package.json")]),s._v("文件里，如下：")]),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"jsnext:main"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"es/index.js"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 采用 ES6 语法的代码入口文件")]),s._v("\n  "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"main"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"lib/index.js"')]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 采用 ES5 语法的代码入口文件")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n")])])]),a("p",[s._v("Webpack 会根据 "),a("code",[s._v("mainFields")]),s._v(" 的配置去决定优先采用那份代码，"),a("code",[s._v("mainFields")]),s._v(" 默认如下：")]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[s._v("mainFields"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"browser"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"main"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])])]),a("p",[s._v("Webpack 会按照数组里的顺序去"),a("code",[s._v("package.json")]),s._v("文件里寻找，只会使用找到的第一个。")]),a("p",[s._v("假如你想"),a("strong",[s._v("优先采用 ES6")]),s._v(" 的那份代码，可以这样配置：")]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[s._v("mainFields"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"jsnext:main"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"browser"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"main"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])])]),a("h3",{attrs:{id:"extensions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#extensions","aria-hidden":"true"}},[s._v("#")]),s._v(" extensions")]),a("p",[s._v("在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。 "),a("code",[s._v("resolve.extensions")]),s._v(" 用于配置在尝试过程中用到的后缀列表，默认是：")]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[s._v("extensions"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('".js"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('".json"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])])]),a("p",[s._v("也就是说当遇到 "),a("code",[s._v("require('./data')")]),s._v(" 这样的导入语句时，Webpack 会先去寻找 "),a("code",[s._v("./data.js 文件，如果该文件不存在就去寻找")]),s._v("./data.json` 文件， 如果还是找不到就报错。")]),a("p",[s._v("假如你想让 Webpack 优先使用目录下的 TypeScript 文件，可以这样配置：")]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[s._v("extensions"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('".ts"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('".js"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('".json"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])])]),a("h3",{attrs:{id:"modules"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modules","aria-hidden":"true"}},[s._v("#")]),s._v(" modules")]),a("p",[a("code",[s._v("resolve.modules")]),s._v(" 配置 Webpack 去哪些目录下寻找第三方模块，默认是只会去 "),a("code",[s._v("node_modules")]),s._v(" 目录下寻找。 有时你的项目里会有一些模块会大量被其它模块依赖和导入，由于其它模块的位置分布不定，针对不同的文件都要去计算被导入模块文件的相对路径， 这个路径有时候会很长，就像这样 "),a("code",[s._v("import '../../../components/button'")]),s._v(" 这时你可以利用 "),a("code",[s._v("modules")]),s._v(" 配置项优化，假如那些被大量导入的模块都在 "),a("code",[s._v("./src/components")]),s._v(" 目录下，把 "),a("code",[s._v("modules")]),s._v(" 配置成")]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[s._v("modules"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"./src/components"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"node_modules"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])])]),a("p",[s._v("后，你可以简单通过 "),a("code",[s._v("import 'button'")]),s._v(" 导入。")]),a("h3",{attrs:{id:"descriptionfiles"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#descriptionfiles","aria-hidden":"true"}},[s._v("#")]),s._v(" descriptionFiles")]),a("p",[a("code",[s._v("resolve.descriptionFiles")]),s._v(" 配置描述第三方模块的文件名称，也就是 "),a("code",[s._v("package.json")]),s._v(" 文件。默认如下：")]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[s._v("descriptionFiles"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"package.json"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])])]),a("h3",{attrs:{id:"enforceextension-是否强制要求文件后缀"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enforceextension-是否强制要求文件后缀","aria-hidden":"true"}},[s._v("#")]),s._v(" enforceExtension 是否强制要求文件后缀")]),a("p",[a("code",[s._v("resolve.enforceExtension")]),s._v(" 如果配置为 "),a("code",[s._v("true")]),s._v(" 所有导入语句都必须要带文件后缀， 例如开启前 "),a("code",[s._v("import './foo'")]),s._v(" 能正常工作，开启后就必须写成 "),a("code",[s._v("import './foo.js'")]),s._v("。")]),a("h3",{attrs:{id:"enforcemoduleextension"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enforcemoduleextension","aria-hidden":"true"}},[s._v("#")]),s._v(" enforceModuleExtension")]),a("p",[a("code",[s._v("enforceModuleExtension")]),s._v(" 和 "),a("code",[s._v("enforceExtension")]),s._v(" 作用类似，但 "),a("code",[s._v("enforceModuleExtension")]),s._v(" 只对 "),a("code",[s._v("node_modules")]),s._v(" 下的模块生效。")]),a("p",[a("code",[s._v("enforceModuleExtension")]),s._v(" 通常搭配 "),a("code",[s._v("enforceExtension")]),s._v(" 使用，在 "),a("code",[s._v("enforceExtension:true")]),s._v("时，因为安装的第三方模块中大多数导入语句没带文件后缀， 所以这时通过配置 "),a("code",[s._v("enforceModuleExtension:false")]),s._v(" 来兼容第三方模块。")])])}],!1,null,null,null);t.default=n.exports}}]);