Webpack 中 resolve.alias 配置后为啥还是找不到模块？

西门俊娜提问于 2026-03-14 08:43:21 阅读 34

前端

我用 Webpack 搭了个项目，想通过 resolve.alias 简化 import 路径，但配置完之后一直报错说找不到模块，明明路径是对的啊？

比如我把 @ 指向 src 目录，然后在组件里写 import utils from '@/utils'，结果打包时报 Cannot resolve module ‘@/utils’。下面是我的 webpack 配置片段：

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
};

Loader 打包优化

我来解答赞 4 收藏

反馈

1 条解答

设计师依依 Lv1

这个问题挺常见的，十有八九是你没配 extensions。

Webpack 的 resolve.alias 只是给路径起个别名，但具体找哪个文件还得靠 extensions 来指定。我猜你 @/utils 实际上指向的是 src/utils.js 或者 src/utils/index.js 这种，但 Webpack 默认只认 .js, .json, .mjs 这些后缀，如果你的文件扩展名不在默认列表里，就会找不到。

解决办法很简单，把 extensions 配上：

module.exports = {
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
alias: {
'@': path.resolve(__dirname, 'src')
}
}
};

如果你的 utils 目录是个文件夹，里面有 index.js，那 Webpack 会自动找 index.js。如果直接是 utils.js，那就更没问题了。

另外检查一下 path 模块有没有正确引入：

const path = require('path');

如果上面都配好了还是不行，那大概率是你用了 babel-loader 或者其他 loader，这些loader有时候不认 Webpack 的 alias。你需要在 babel 的配置里也配一下，或者在 babel-loader 里加上 alias 配置：

{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
// 如果是较新版本的 babel-loader，可以这样配
// 否则可能需要在 .babelrc 里配
}
}
}

还有一个坑：如果你的 Webpack 版本比较老（4.x 以前），alias 的写法有点区别，不过现在应该都是 4 或 5 了吧。你先试试加上 extensions 能不能解决。

2026-03-14 09:03