webpack 的初衷是让 js 支持模块化管理，并且将前端中的各种资源都纳入到对应的模块管理中来，所以在 webpack 的设计中，最重要的部分就是管理模块和模块之间的关系。
在 webpack 支持的前端代码模块化中，我们可以使用类似 import * as m from \'./index.js\' 来引用代码模块 index.js。webpack 构建的时候，会解析依赖后，然后再去加载依赖的模块文件。所谓 webpack 构建的起点，本质上也是一个 module，而我们在设置好 webpack 后，开发的过程亦是在写一个个的业务 module。
在 JavaScript 中尽量使用 ES6 module 的语法来引用依赖。
路径解析当我们写一个 import 语句来引用一个模块时，webpack 是如何获取到对应模块的文件路径的呢？这其中有十分复杂的实现逻辑和相对繁琐的配置选择。
webpack 中有一个很关键的模块 enhanced-resolve 就是处理依赖模块路径的解析的，这个模块可以说是 Node.js 那一套模块路径解析的增强版本，有很多可以自定义的解析配置。
不熟悉 Node.js 模块路径解析机制的同学可以参考这篇文章：深入 Node.js 的模块机制。
简单整理一下基本的模块解析规则，以便更好地理解后续 webpack 的一些配置会产生的影响。
解析相对路径
查找相对当前模块的路径下是否有对应文件或文件夹
是文件则直接加载
是文件夹则继续查找文件夹下的 package.json 文件
有 package.json 文件则按照文件中 main 字段的文件名来查找文件
无 package.json 或者无 main 字段则查找 index.js 文件
解析模块名
查找当前文件目录下，父级目录及以上目录下的 node_modules 文件夹，看是否有对应名称的模块
解析绝对路径（不建议使用）
直接查找对应路径的文件