12-resolve模块解析

webpack能解析三种文件路径

• 绝对路径
• 相对路径
• 模块路径

确实文件还是文件夹

• 如果是一个文件
  • 如果文件具有扩展名，则直接打包文件
  • 否则，将使用 resolve.extensions选项作为文件扩展名解析
• 如果是一个文件夹
  • 会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找
  • resolve.mainFiles的默认值是 [‘index’]；
  • 再根据 resolve.extensions来解析扩展名；

extensions和alias配置

• 默认值是 [‘.wasm’, ‘.mjs’, ‘.js’, ‘.json’]；
• 所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时，我们必须自己写上扩展名；

另一个非常好用的功能是配置别名alias

  resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx', '.ts', '.vue'],
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@components": path.resolve(__dirname, "./src/components")
    }
  },