webpack环境下如何通过jsconfig配置的alias获取文件夹绝对路径？

前置准备：统一别名配置 #

你当前的jsconfig别名配置仅提供给IDE识别，webpack运行时不会直接读取该配置，所以先把别名配置抽为公共文件，避免webpack和jsconfig两份配置不一致导致问题：

// alias.config.js 存放在项目根目录
const path = require('path')

module.exports = {
  // 项目根路径
  basePath: path.resolve(__dirname, '.'),
  // 别名和对应绝对路径映射
  aliasMap: {
    '@': path.resolve(__dirname, 'src')
  }
}

修改webpack配置引入该别名：

// webpack.config.js
const { aliasMap } = require('./alias.config')

module.exports = {
  // 其他webpack配置省略
  resolve: {
    alias: aliasMap
  }
}

jsconfig.json保持你当前的配置即可，和aliasMap的规则对应即可。

场景1：Node.js环境（webpack配置、构建脚本等服务端场景使用） #

直接基于公共配置实现转换函数即可：

const path = require('path')
const { aliasMap } = require('./alias.config')

function getAbsoluteFromAlias(aliasPath) {
  // 遍历所有别名匹配前缀
  for (const [alias, aliasRoot] of Object.entries(aliasMap)) {
    const aliasPrefix = `${alias}/`
    if (aliasPath.startsWith(aliasPrefix)) {
      // 替换别名前缀后拼接绝对路径
      const relativePath = aliasPath.slice(aliasPrefix.length)
      return path.resolve(aliasRoot, relativePath)
    }
  }
  throw new Error(`未匹配到别名路径：${aliasPath}`)
}

// 使用示例
const absolutePath = getAbsoluteFromAlias('@/my_folder')
// 输出格式：/你的项目实际根路径/src/my_folder

场景2：浏览器运行时/前端代码内使用 #

需要先通过webpack的DefinePlugin将别名配置注入到前端全局环境，再实现转换逻辑：

1. 修改webpack配置注入变量：

const webpack = require('webpack')
const { aliasMap } = require('./alias.config')

module.exports = {
  // 其他配置省略
  plugins: [
    new webpack.DefinePlugin({
      'window.__ALIAS_MAP__': JSON.stringify(aliasMap)
    })
  ]
}

2. 前端代码中实现转换函数：

function getAbsoluteFromAlias(aliasPath) {
  for (const [alias, aliasRoot] of Object.entries(window.__ALIAS_MAP__)) {
    const aliasPrefix = `${alias}/`
    if (aliasPath.startsWith(aliasPrefix)) {
      const relativePath = aliasPath.slice(aliasPrefix.length)
      return `${aliasRoot}/${relativePath}`
    }
  }
  throw new Error(`未匹配到别名路径：${aliasPath}`)
}

注意：普通Web项目运行在浏览器环境下，无法获取用户本地的文件真实绝对路径，此处拿到的是项目构建时所在机器的路径。如果是Electron类桌面端项目可以正常拿到本地路径。

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