Resolve路径解析

三种文件路径

我们在开发中，会用到各式各样的模块依赖，有的是我们自己编写的代码，有的是来自第三方库。
我们会在每个模块里import导入要用到的模块，如果是根据绝对路径或相对路径导入的，那我们还能理解webpack会怎样去找到对应的文件。
但是还有一种情况： import React from ‘react’。这种路径webpack是怎么找到的呢？

Webpack可以解析三种文件路径：

  • 绝对路径（无需解析）；
  • 相对路径（webpack会根据上下文目录，生成文件的绝对路径）；
  • 模块路径（ 原来上边说到的import React from ‘react’ ，就是我们的模块路径。

模块路径会去哪里找呢？
其实这是resolve.modules里的配置。其默认值为[‘node_modules’]。
所以模块路径默认会去node_modules文件夹里进行查找。

extensions

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

  1. //webpack.config.js    
  2. resolve: {  
  3.   extensions: [".wasm", ".mjs", ".js", ".json", ".jsx", ".ts", ".vue"],  
  4.   alias: {  
  5.     "@": path.resolve(__dirname, "./src"),  
  6.     pages: path.resolve(__dirname, "./src/pages"),  
  7.   },  
  8. },

alias

alias：配置别名
特别是当我们项目的目录结构比较深的时候，或者一个文件的路径可能需要 ../../../这种路径片段；
我们可以给某些常见的路径起一个别名；

  1. //webpack.config.js    
  2. resolve: {  
  3.   extensions: [".wasm", ".mjs", ".js", ".json", ".jsx", ".ts", ".vue"],  
  4.   alias: {  
  5.     "@": path.resolve(__dirname, "./src"),  
  6.     pages: path.resolve(__dirname, "./src/pages"),  
  7.   },  
  8. },

context上下文

当我们给entry等属性写一个相对路径时，其实这个相对路径不是基于当前所在webpack.config.js文件，而是基于context上下文。
context默认下，是指向package.json配置里的—config后的文件，如果都没设置，默认指向项目根目录。

  1. "scripts": {  
  2.   "build": "webpack --config ./config/webpack.common.js --env production",  
  3.   "serve": "webpack serve --config ./config/webpack.common.js --env development"  
  4. },
  1. //webpack.config.js  
  2. const path = require('path')  
  4. module.exports = {  
  5. //配置入口：这里的相对路径其实不是相对与当前文件，而是相对于context这个属性
  6. //context：一个绝对路径，不设置的话默认为package.json配置里--config后的路径
  7.   context = path.resolve(__dirname,"./build") 
  8.   entry = './src/main.js',