Webpack 4中如何将相对路径重定向至另一相对路径？

你的问题出在Webpack默认的resolve.alias匹配逻辑上——相对路径形式的别名键（比如../path1）无法正确匹配已被解析的相对导入路径，因为Webpack会先将../path1/xxx这类相对路径转换为绝对路径，再进行别名匹配，导致原配置失效。以下是两种可行的解决方法：

方法一：使用Webpack正则别名（纯Webpack项目） #

利用Webpack支持正则表达式作为别名键的特性，精准匹配所有以../path1/开头的导入路径，并替换为目标绝对路径：

const path = require('path');

module.exports = {
  // ...其他Webpack配置
  resolve: {
    alias: {
      // 正则匹配所有 ../path1/xxx 格式的导入
      '^../path1/(.*)$': path.resolve(__dirname, '../../another/path2/$1')
    },
    symlinks: false // 禁用符号链接解析，确保别名匹配更可靠
  }
};

这里用path.resolve生成绝对路径，避免了相对路径在不同文件下解析不一致的问题，$1会捕获正则中(.*)部分的内容，完美保留原导入的子路径（比如module1/subModule）。

方法二：TypeScript项目结合tsconfig.json配置 #

如果你的项目使用TypeScript，仅配置Webpack别名会导致TS编译器报错（因为TS无法识别Webpack别名），需要同时配置TS路径映射，并让Webpack读取该配置：

1. 配置tsconfig.json的路径映射
   在tsconfig.json中添加paths配置，对应你的路径重定向需求：

{
  "compilerOptions": {
    "baseUrl": ".", // 必须设置baseUrl才能使用paths
    "paths": {
      "../path1/*": ["../../another/path2/*"]
    }
  }
}

2. 安装并使用tsconfig-paths-webpack-plugin
   这个插件可以让Webpack自动读取tsconfig.json中的paths配置，无需重复编写Webpack别名：

npm install tsconfig-paths-webpack-plugin --save-dev

然后在Webpack配置中引入并使用该插件：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // ...其他Webpack配置
  resolve: {
    plugins: [new TsconfigPathsPlugin()]
  }
};

额外注意事项 #

如果你的项目使用Babel处理代码，还需要配置babel-plugin-module-resolver让Babel识别别名，避免编译阶段报错：

npm install babel-plugin-module-resolver --save-dev

在.babelrc或babel.config.json中添加插件配置：

{
  "plugins": [
    ["module-resolver", {
      "alias": {
        "../path1": "../../another/path2"
      }
    }]
  ]
}

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