如何在webpack.config.ts文件中正确使用并解析已配置的路径别名

tsc编译阶段会根据tsconfig.json中的paths配置自动将别名替换为实际物理路径，因此编译后的产物不会有别名识别问题。但webpack加载webpack.config.ts时依赖ts-node在Node.js运行时实时编译执行，Node.js原生不支持tsconfig定义的路径别名，运行时别名未被转换为实际路径，就会触发模块找不到的报错，哪怕修改了配置文件自身的别名引用，其依赖的其他文件里的别名依然会因为未解析报错。

方案1：运行时别名解析（无需预编译配置，最常用） #

通过tsconfig-paths在运行时自动映射别名到实际路径，适配直接用webpack cli加载ts配置的场景

• 第一步：安装依赖

npm install tsconfig-paths ts-node --save-dev

• 第二步：修改webpack启动脚本，在package.json的scripts中调整启动命令，预加载别名解析模块：

{
  "scripts": {
    "dev": "node -r tsconfig-paths/register -r ts-node/register ./node_modules/webpack-cli/bin/cli.js serve --config webpack.config.ts",
    "build": "node -r tsconfig-paths/register -r ts-node/register ./node_modules/webpack-cli/bin/cli.js build --config webpack.config.ts"
  }
}

• 如果是自定义脚本加载webpack配置，只需要在脚本的最顶部第一行引入注册模块即可：

// 必须放在所有其他import语句之前
import 'tsconfig-paths/register'
// 后续引入的所有文件的别名都会被自动解析
import webpack from 'webpack'
import config from './webpack.config.ts'

方案2：编译时替换别名（适合预编译配置文件的场景） #

如果你的工作流是提前将webpack配置编译为JS再执行，可以用tsc-alias在编译阶段直接把所有别名替换为实际相对路径，运行编译后的JS文件就不存在别名问题

• 第一步：安装依赖

npm install tsc-alias --save-dev

• 第二步：添加编译脚本，编译完成后自动替换别名：

{
  "scripts": {
    "build:webpack-config": "tsc --project ./tsconfig.webpack.json && tsc-alias --project ./tsconfig.webpack.json",
    "dev": "npm run build:webpack-config && webpack serve --config ./dist/webpack.config.js"
  }
}

• 确保tsconfig.json中的baseUrl和paths配置路径正确，所有路径相对baseUrl定义
• 如果tsconfig文件路径不是根目录的tsconfig.json，可以通过环境变量指定配置文件：

TS_NODE_PROJECT=./build/tsconfig.webpack.json node -r tsconfig-paths/register -r ts-node/register ./node_modules/webpack-cli/bin/cli.js serve --config ./build/webpack.config.ts

内容的提问来源于stack exchange，提问作者Sherif eldeeb