面试题：Webpack中模块化与依赖图：模块解析规则

Question

在Webpack中，简述其模块解析规则，例如如何处理相对路径模块、绝对路径模块以及如何解析第三方模块，同时说明如何配置别名来改变模块解析路径。

Answer 1

模块解析规则

1. 相对路径模块：
   • 当使用相对路径（如 ./module.js 或 ../subfolder/module.js）引入模块时，Webpack 会从当前导入语句所在文件的目录开始查找。
   • 首先，它会按照文件扩展名的顺序（默认为 .js, .json, .wasm 等）查找与指定名称匹配的文件。例如，如果导入 ./module，Webpack 会先找 ./module.js，如果不存在，再找 ./module.json 等。
   • 如果找不到对应的文件，Webpack 会查找同名目录，并在该目录中查找 index.js 或其他配置的入口文件（如 package.json 中的 main 字段指定的文件）。
2. 绝对路径模块：
   • 绝对路径（如 /src/module.js 在 Node.js 环境或特定操作系统支持的绝对路径格式）在 Webpack 中直接按照路径查找。
   • 在 Node.js 环境下，绝对路径通常是基于文件系统根目录。Webpack 会直接尝试从指定的绝对路径加载模块，同样按照文件扩展名顺序查找文件或查找目录中的入口文件。
3. 第三方模块：
   • 第三方模块通常是安装在项目 node_modules 目录下的模块。
   • Webpack 使用 Node.js 的模块解析策略来查找第三方模块。它会从当前模块所在目录开始，逐级向上查找父目录中的 node_modules 目录，直到找到匹配的模块。
   • 例如，如果在 src/components/MyComponent.js 中导入 lodash，Webpack 会先在 src/components/node_modules 中找 lodash，如果找不到，会在 src/node_modules 中找，然后在项目根目录的 node_modules 中找。

配置别名改变模块解析路径

在 Webpack 配置文件（通常是 webpack.config.js）中，可以使用 alias 配置项来改变模块解析路径。示例如下：

const path = require('path');

module.exports = {
    // 其他配置项...
    resolve: {
        alias: {
            // 将 @ 别名指向 src 目录
            '@': path.resolve(__dirname,'src'),
            // 将 components 别名指向 src/components 目录
            'components': path.resolve(__dirname,'src/components')
        }
    }
};

这样，在代码中就可以使用别名来导入模块，例如：

// 原本相对路径导入
// import MyComponent from '../components/MyComponent';
// 使用别名导入
import MyComponent from 'components/MyComponent';

这使得导入路径更加简洁，同时在项目结构调整时，只需修改 alias 配置，而无需修改大量的导入语句。