resolve 用来配置 webpack 如何解析模块，可通过优化 resolve 配置来覆盖默认配置项，减少解析范围。

4.1 alias 别名

alias 可以创建 import 或 require 的别名，用来简化模块引入。

webpack.common.js配置 

  1. module.exports = {
  2.   resolve: {
  3.     alias: {
  4.       '@': paths.appSrc, // @ 代表 src 路径
  5.     },
  6.   }
  7. }
  1. // index.tsx
  2. import App from '@/App';
  3. ...

4.2 extensions

extensions 表示需要解析的文件类型列表。

根据项目中的文件类型，定义 extensions，以覆盖 webpack 默认的 extensions，加快解析速度。

由于 webpack 的解析顺序是从左到右，因此要将使用频率高的文件类型放在左侧，如下我将 tsx 放在最左侧。

webpack.common.js 配置方式如下：

  1. module.exports = {
  2.   resolve: {
  3.     // extensions 表示需要解析的文件类型列表。
  4.     extensions: ['.tsx', '.js'], // 因为我的项目只有这两种类型的文件，如果有其他类型，需要添加进去。
  5.   }
  6. }

4.3 modules

modules 表示 webpack 解析模块时需要解析的目录。

指定目录可缩小 webpack 解析范围，加快构建速度。

webpack.common.js 配置方式如下：

  1. module.exports = {
  2.   // modules 表示 webpack 解析模块时需要解析的目录。
  3.   modules: [
  4.     'node_modules',
  5.     paths.appSrc,
  6.   ]
  7. }

4.4 symlinks

如果项目不使用 symlinks（例如 npm link 或者 yarn link），可以设置 resolve.symlinks: false，减少解析工作量。

webpack.common.js 配置方式如下：

  1. module.exports = {
  2.   resolve: {
  3.     symlinks: false,
  4.   },
  5. }

优化 resolve 配置后，构建时间将减少 1.5%，效果如下：
image.png