如何在Webpack v5中配置与Vite类似的路径别名？

报错原因很明确：Webpack 配置文件默认采用 CommonJS 模块规范，而 import.meta.url 是 ES 模块特有的属性，在 CommonJS 环境下无法识别，因此抛出语法错误。

下面是两种可行的正确配置方式：

方法一：使用 Node.js 内置的 __dirname（推荐） #

__dirname 是 CommonJS 环境下的内置变量，代表当前配置文件所在的目录路径，直接通过 path.resolve 拼接 src 目录路径即可，写法简洁直观：

const path = require('path');

module.exports = {
  // 其他 Webpack 配置项...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
};

方法二：基于 url 模块调整写法 #

如果坚持使用 url 模块的 API，可通过 __filename（当前配置文件的完整路径）替代 import.meta.url，适配 CommonJS 环境：

const { fileURLToPath, URL } = require('url');
const path = require('path');

module.exports = {
  // 其他 Webpack 配置项...
  resolve: {
    alias: {
      '@': fileURLToPath(new URL(`file://${path.resolve(__dirname, './src')}`))
    }
  }
};

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