为何Webpack的resolve.alias用@成功，用~却报错？

AI 小北

2026-5-25

解决Webpack别名~无法解析模块的问题

这个问题我之前也碰到过，核心是Webpack对~符号的默认解析逻辑和@不一样，再加上你用到了wepy的配置，导致模块解析出错。咱们一步步来排查解决：

1. 修正Webpack别名的匹配规则

Webpack（以及部分配套loader比如css-loader）会默认把~当作node_modules目录的前缀标识。当你写~/model/api时，它可能会错误地去node_modules里找这个模块，而不是你的src目录。

你可以修改alias配置，通过添加精准匹配规则来覆盖默认行为：

resolve: {
  alias: {
    // 精准匹配根路径的~，同时兼容子路径
    '~': path.join(__dirname, 'src'),
    '~$': path.join(__dirname, 'src')
  },
  aliasFields: ['wepy'],
  modules: ['node_modules']
}

2. 排查wepy的aliasFields影响

因为你配置了aliasFields: ['wepy']，wepy框架内部可能对路径别名有自己的处理逻辑，~符号可能被wepy的规则覆盖了。

可以先临时注释掉aliasFields: ['wepy']，测试~/model/api是否能正常解析：

如果能正常解析，说明是wepy的配置和Webpack别名冲突，你需要调整wepy的相关配置，或者在wepy的配置文件里同步添加~的别名映射。
如果还是不行，继续往下排查。

3. 检查代码检查工具的配置（如ESLint）

如果你项目里用了ESLint，它可能无法识别~作为别名，导致编译前就阻断了模块解析（虽然你报错是ReferenceError，但也有可能是检查工具的间接影响）。

可以在ESLint配置文件里添加如下配置，让它能读取Webpack的别名规则：

// .eslintrc.js
module.exports = {
  // ...其他配置
  settings: {
    'import/resolver': {
      webpack: {
        config: 'webpack.config.js'
      }
    }
  }
}