Webpack Encore能否使用tsconfig.json中的路径配置作为别名？

算力阿峰

2026-7-13

解决Symfony Webpack Encore中TypeScript路径与Webpack别名同步问题

你遇到的错误是因为tsconfig-paths-webpack-plugin属于Webpack的解析器插件，不能通过Encore的addPlugin()方法直接添加，必须配置在Webpack的resolve.plugins节点下。下面是正确的配置方式：

正确配置代码

const Encore = require('@symfony/webpack-encore');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

// 基础Encore配置（根据你的项目调整）
Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .addEntry('app', './assets/app.ts')
  .enableTypeScriptLoader()
  // 其他配置如enableSingleRuntimeChunk()、enableSourceMaps()等按需添加

// 注入解析器插件到Webpack配置
Encore.configureWebpackConfig(config => {
  // 保留原有resolve插件，避免覆盖Encore默认配置
  config.resolve.plugins = [
    ...(config.resolve.plugins || []),
    new TsconfigPathsPlugin({
      // 可选：手动指定tsconfig文件路径，默认读取项目根目录的tsconfig.json
      // configFile: './tsconfig.json'
    })
  ];
});

module.exports = Encore.getWebpackConfig();

关键说明

配置位置：必须通过configureWebpackConfig()修改Webpack底层配置，将插件放入resolve.plugins，而不是用addPlugin()（该方法用于添加全局Webpack插件，不是解析器插件）
保留默认配置：用...(config.resolve.plugins || [])合并原有插件，防止Encore自带的解析配置被覆盖
TS Loader依赖：确保已经调用enableTypeScriptLoader()，否则TypeScript的路径别名本身不会被Webpack识别

验证步骤

检查你的tsconfig.json中compilerOptions.paths配置是否正确，示例：

{
  "compilerOptions": {
    "baseUrl": "./assets",
    "paths": {
      "@/components/*": ["components/*"],
      "@/utils/*": ["utils/*"]
    }
  }
}