webpack 如何找到node_modules目录的对应的模块

简言之

通过依赖包的package.json文件中的main属性指定的路径，找到对应的模块

在 Node.js 模块系统中，如果 require 的模块不是核心模块，而且没有 ‘./’ 之类的开头，那就需要从当前 package 的 node_modules 里面找，找不到就到当前 package 目录上层 node_modules 里面取… 一直找到全局 node_modules 目录。

这样找到的往往是文件夹，所以接下来就是处理一个文件目录作为 Node 模块的情况。如果文件目录下有 package.json，就根据它的 main 字段找到 js 文件。如果没有 package.json，那就默认取文件夹下的 index.js。

由于 webpack browsersify 等模块打包工具是兼容 node 的模块系统的，自然也会进行同样的处理流程。不同的是，它们支持更灵活的配置。比如在 webpack 里面，可以通过 alias 和 external 字段配置，实现对默认 import 逻辑的自定义。

webpack.config.js

alias: {
  Icon: path.resolve(__dirname, 'src/components/Icon.jsx',
}

tets.js

import Icon from 'Icon' // -> /path/to/src/components/Icon.jsx

Facebook 有一套前端模块系统叫做 Haste，现在 React 在用，所有模块被引用只需要文件名，不用带路径。这样解决了 import 路径又臭又长的毛病，也避免重构目录结构后需要大量修改相对路径的问题。但是这样做的前提是，一个项目下的所有源码文件名称都必须保证唯一。

在 webpack 中，要实现类似的特性是非常简单的。你只需要在 webpack.config 里面遍历所有的源码文件，生成一个「文件名: 路径」的对象，然后做一下防重判断，强制文件名必须唯一，再把这个对象塞给 resolve.alias 字段，就可以了。

但是这种操作毕竟不是标准，会有一些缺点：

1. 编辑器支持会有问题，不能正确识别这种引用方式，可能需要插件才能解决。
2. Node 不支持。如果代码需要同时被 Node 和前端代码引用，就不行。

参考：

Node.js v8.4.0 Documentation

Resolve - Webpack

Codebase Overview - React

Support custom root directory alias for imports · Issue #14907 · Microsoft/vscode