深刻理解webpack如何解析代码路径

引入

在运用前端主流框架（react,vue,angular）开发过程当中，引入一个模块或文件路径，是如何解析到目标文件的？是按照什么样的规则和顺序查找到的？这个问题乍一看是简单，尤为在小型项目中，模块和文件并很少的状况下。但遇到一些比较复杂的项目，模块和文件路径的引入须要谨慎当心，这就须要深刻地理解一下webpack的代码路径解析规则了。

路径

首先，综合一下在项目中配置路径的三种形式

1. 相对路径

相对路径是相对于当前目录的路径

import {button} from '../component/button'
复制代码

2. 绝对路径

绝对路径直接指明了文件的具体位置，直接能够查找到（不建议使用）

import {button} from '/home/me/file'
复制代码

3. 模块名

直接引入模块名，会查找当前文件目录，父级目录直至根目录下的 node_modules(默认) 文件夹，看是否有对应名称的模块。

import React from 'react'
import "module/lib/file";
复制代码

注意：默认的node_modules能够根据webpack配置的resolve.modules进行更改

注意：查找中会根据webpack配置的resolve.extensions自动补全扩展名

注意：查找中会根据wepack配置的resolve.alias替换掉别名

路径解析

根据上述规则解析路径后，解析器将路径指向文件或者文件夹（目录）

1. 若是是文件，直接加载

2. 若是是文件夹，查找里面是否有package.json文件

   1）若是有，默认按照里面的main字段的文件名查找文件 （能够经过resolve.mainFields 配置更改）

   2）若是没有，默认查找index.js文件（能够经过resolve.mainFiles配置更改）

resolve配置

了解上述的路径形式和最终的解析规则后，根据个人一些标识，大体上也可以看出webpack路径配置的发挥空间了。

webpack解析代码路径的核心模块是enhanced-resolve模块

webpack解析匹配代码路径的配置在resolve里面

接下来将着重对resolve中alias，extensions，modules，mainFields，mainFiles属性作单独详细的介绍。

resolve.alias

alias，顾名思义，是指路径的别名。简单点说，就是用一个简单的别名来替换一个经常使用的或者复杂的文件路径。

原理：先替换，后解析。在引入模块时，先将模块路径中匹配alias中的key替换成对应的value，再作查找。

注意一下几点：

1. 替换掉的路径能够是相对路径，也能够是绝对路径。

resolve: {
    alias: {
      '@': path.resolve(__dirname, 'components'),  
      // 这里使用 path.resolve 和 __dirname 来获取绝对路径
      // import '@/Button.js' 等同于 import '[项目绝对路径]/components/Button.js'
      x: './src/components'   // 相对路径
    }
}
复制代码

2.这里的匹配是模糊匹配，不是精确匹配。即路径中携带别名便可匹配

3.注意精确匹配的用法。在key的末尾带一个$字符

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        'x$': 'module/dir'
        // Import 'x/file.js' // 这里不能匹配
    }
}
复制代码

resolve.extensions

extensions中指定了webpack能够识别的文件扩展名。

注意一下几点：

1. 扩展名匹配的前后顺序。从左到右依次匹配。好比下例中，引入import {Button} from './component/button'，优先匹配的是button.js，若是没有button.js，会匹配button.vue，依次往下。
2. extensions中没有的后缀，是不会自动补全的。好比下例中没有css的扩展名，若是想引入import {Button} from './style/button'，是匹配不到button.css文件的

resolve: {
    extensions: ['js', 'vue', 'json']
}
复制代码

resolve.modules

查找声明依赖名的模块，默认搜索node_modules目录。通常咱们不修改这个配置。

resolve: {
  modules: ['node_modules']
},
复制代码

resolve.mainFields

在引用模块时，指明使用package.json中哪一个字段指定的文件，默认是“main”

resolve: {
  // 配置 target === "web" 或者 target === "webworker" 时 mainFields 默认值是：
  mainFields: ['browser', 'module', 'main'],

  // target 的值为其余时，mainFields 默认值为：
  mainFields: ["module", "main"],
}
复制代码

由于一般状况下，模块的 package 都不会声明 browser 或 module 字段，因此即是使用 main 了。

resolve.mainFiles

在目录中没有package.json时，指明使用该目录中哪一个文件，默认是index.js

resolve: {
  mainFiles: ['index'], // 能够添加其余默认使用的文件名
}
复制代码

最后

resolve除了上面介绍的几个属性外，还有其余一些属性，有兴趣的筒子们能够再深刻研究一下。但愿我这篇文章对还不太清楚webpack代码路径的童鞋有必定的指引做用~~