16_webpack的resolve

resolve模块解析

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

在开发中我们会有各种的模块依赖，这些模块可能来源于自己编写的代码，也可能是第三方库

resolve可以帮助我webpack从每个require/import语句中，找到需要引入到合适的模块代码

webpack使用enhanced-resolve来解析文件路径

webpack能解析三种文件路径
　　绝对路径：不需要再进一步解析
　　相对路径：在这种情况下，使用import或require的资源文件所处的目录，被认为是上下文目录
　　　　　　　在import/require中给定的相对路径，会拼接此上下文路径，来生成模板的绝对路径

　　模块路径：在resolve.modules中指定的所有目录检索模块
　　　　　　　默认值是['node_module']，所以默认会从node_modules中查找文件；
　　　　　　　我们可以通过设置别名的方式来替换初始模块路径，alias的配置

 

确认是文件还是文件夹

如果是一个文件：

　　如果文件具有扩展名，则直接打包文件
　　否则，将使用resolve.extensions选项作为文件扩展名解析

　　resolve.extensions的默认扩展名：

　　　　[string] = ['.js', '.json', '.wasm']

　　　　尝试按顺序解析这些扩展。如果多个文件共享相同的名称但具有不同的扩展名，webpack 将解析扩展名在数组中首先列出的扩展名，并跳过其余扩展名。

　　如果找不到的话，就会直接报错

如果是一个文件夹:
　　会在文件夹中根据resolve.mainFiles配置选项中指定的文件顺序查找
　　resolve.mainFiles的默认值是['index'];
　　再根据resolve.extensions来解析扩展名

 

extensions和alias配置

extensions是解析到文件时自动添加扩展名
　　默认值为['.js', '.json', '.wasm']
　　所以我们代码中需要加载.vue文件时，我们需要去配置extensions

 resolve: {
    extensions: [".vue", ".js"],
  },

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

　　当我们目录层级比较深的时候，我们在项目中去映入一个文件可能需要../../../这种路径
　　我们可以给某些常见的路径起一个别名

resolve: {
    extensions: [".vue", ".js"],
    alias: {
      "@": path.resolve(__dirname, "./src"),
      pages: path.resolve(__dirname, "./src/pages"),
    },
  },

那么我们要引入层级比较深的文件的时候就只需要

// import main from '../../../js/main.js';
import main from '@/js/main.js';