(掌握)webpack对文件路径的解析和配置

(掌握)webpack对文件路径的解析和配置

resolve模块解析

• resolve用于设置模块如何被解析：

  • 在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库
  • resolve可以帮助webpack从每个 require/import 语句中，找到需要引入到合适的模块代码
  • webpack 使用 enhanced-resolve 来解析文件路径

• webpack能解析三种文件路径：

  • 绝对路径

    • 由于已经获得文件的绝对路径，因此不需要再做进一步解析

  • 相对路径

    • 在这种情况下，使用 import 或 require 的资源文件所处的目录，被认为是上下文目录
    • 在 import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径

  • 模块路径(比如import {createApp} from 'vue'的vue就是一个模块路径，会去node_modules查找)

    • 在 resolve.modules中指定的所有目录检索模块

      默认值是 [‘node_modules’]，所以默认会从node_modules中查找文件

    • 我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置

确实文件还是文件夹

• 如果是一个文件：

  • 如果文件具有扩展名(.js，.ts，.json这些)，则直接打包文件；
  • 否则，将使用 resolve.extensions选项作为文件扩展名解析 (extensions的中文意思是扩展)

• 如果是一个文件夹：

  • 会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找

    resolve.mainFiles的默认值是 [‘index’] (这就是我们引入文件夹下的index能够省略index的原因，因为这里默认找index)

    再根据 resolve.extensions来解析扩展名

extensions和alias配置

• extensions是解析到文件时自动添加扩展名：
  • 默认值是 [‘.wasm’, ‘.mjs’, ‘.js’, ‘.json’]
  • 所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时，我们必须自己写上扩展名
  • 我们之前浅尝试了一下import hello from "./xxx/Hello.vue"的后缀.vue不能去掉就是因为我们没有配置extensions，如果配置了，下次我们就不需要加上.vue这个后缀了
• 另一个非常好用的功能是配置别名alias：
  • 特别是当我们项目的目录结构比较深的时候，或者一个文件的路径可能需要 …/…/…/这种路径片段
  • 我们可以给某些常见的路径起一个别名

//webpack.config.js文件
resolve:{//resolve用来解析模块的
  extensions:[".wasm",".mjs",".js","vue","tsx"],//解析到对应文件就加上这些扩展名(这也是我们为什么可以引入的时候省略.vue的原因)
  alias:{//给路径起别名，下次写的时候就能用@替代掉路径(在小满zs的Router4视频就有使用到这种方法)
    "@":resolveApp(__dirname,"./src/utils")//__dirname是用来获取当前的所在路径
    pages:resolveApp("./src/pages")
  }
}