模块解析

• 使用webpack订制前端开发 - webpack如何解析代码模块路径

核心的三个问题：

1. webpack怎么找到的node_modules，如果当前目录下没有到那里去找
2. webpack找到了node_modules，解析对应的包的方式是什么，如何读取package.json配置
3. webpack配置的loader如何寻找node_modules的包

resolve 配置

webpack解析模块（import）是使用 enhanced-resolve（注意的是，它可以处理AMD，CMD，CommonJS，ES Module等等模块非常强大）

webpack导出的resolve配置就会传递给 enhanced-resolve 进行解析，具体常用的有以下：

• resolve.alias 设置别名

  const resolve = {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
  

• resolve.extensions 设置路径解析时，遇到无后缀文件的有限解析方式，默认是['.js']，表示遇到无后缀的话有限当做.js来解析

  let resolve = {
    ...resolve,
    extensions: ['.css', '.js'] // 优先当做css文件解析
  }
  

• resolve.modules webpack寻找node_modules的路径数组，可以将"不规则"的 node_modules 文件路径添加进去使用

• resolve.mainFields webpack找到一个npm包的时候，默认找package.json的mainFields字段，将它的值作为解析npm包的入口，可以通过 mainFields 改变

• resolve.mainFiles webpack找到一个npm包的时候 发现路径下没有package.json文件，那么默认价值index文件，可以通过 resolve.mainFiles 改变

总结

本节案例可以通过 code-example / 10-example 找到