说明

1. 这套笔记是对于 webpack 5.x 进行阐述的。（webpack <= 4 用法稍有不同）

概述：

config 中的 resolve 选项可以配置一些开发中快捷方式，告诉 webpack 应该如何解析模块。

基本语法

const config = {
  // ...
  resolve: {
    // configuration options
    // ...
  },
  // ...
};

module.exports = config;

配置选项

具体配置选项参考链接：www.webpackjs.com/configurati… ，这里列举几个比较常用的 resolve 配置选项：

配置名称	参考链接	配置说明
resolve.alias	www.yuque.com/jackcheung-…	配置导入文件相对路径别名的对象
resolve.extensionAlias	www.yuque.com/jackcheung-…	一个将扩展名与扩展别名映射的对象
resolve.extensions	www.yuque.com/jackcheung-…	可省略导入文件后缀名的声明数组
resolve.modules	www.yuque.com/jackcheung-…	可以导入的模块文件夹 (默认是 ['node_modules'])

resolve.alias

选项说明：

创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块：

配置类型：

{ [aliasName: string]: string }

代码实例：

const path = require('path');

const config = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
};

module.exports = config;

resolve.extensionAlias

选项说明：

一个将拓展名与拓展名别名映射的对象。

配置类型：

{ [extentionKey: string]: string[] }

代码实例：

module.exports = {
  //...
  resolve: {
    extensionAlias: {
      '.js': ['.ts', '.js'],
      '.mjs': ['.mts', '.mjs'],
    },
  },
};

resolve.extensions

选项说明：

resolve.extensions会尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件并跳过其余的后缀。

配置类型：

{ [extensionKey: string] = ['.js', '.json', '.tpl', '.ejs'] }

代码实例：

module.exports = {
  //...
  resolve: {
    extensionAlias: {
      '.js': ['.ts', '.js'],
      '.mjs': ['.mts', '.mjs'],
    },
  },
};

resolve.modules

选项说明：

告诉 webpack 解析模块时应该搜索的目录。（默认是 ['node_modules']）

配置类型：

{ [extentionKey: string]: string[] }

代码实例：

const path = require('path');

const config = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
};

module.exports = config;