为什么Webpack打包时提示”Module not found: Error: Can’t resolve ‘./utils'”?

Designer°振巧 阅读 20

我在用Webpack打包项目时遇到了奇怪的问题,明明utils.js就在当前目录下,但打包时一直报Module not found错误。配置文件里已经设置了resolve.extensions: [".js", ".jsx"],但还是不行。

尝试过绝对路径和相对路径都试过,相对路径写的是./utils,文件名大小写也正确。用webpack --display-modules查看模块依赖时,发现utils模块被标记为missing状态。

这是我的webpack.config.js配置片段:


module.exports = {
  resolve: {
    extensions: [".js", ".jsx"],
    alias: {
      utils: path.resolve(__dirname, 'src/utils')
    }
  }
};

这样配置有问题吗?为什么alias没生效还报找不到模块?

我来解答 赞 4 收藏
二维码
手机扫码查看
1 条解答
IT人华丽
你这配置看着没问题,但alias可能被覆盖了。Webpack的resolve.alias里如果写utils: path,引用的时候得用utils/xxx这种形式。你要是用的是./utils这种相对路径,那alias根本不会生效。

试试这么改:

module.exports = {
resolve: {
extensions: [".js", ".jsx"],
alias: {
'@utils': path.resolve(__dirname, 'src/utils')
}
}
};


然后在代码里用import utils from '@utils/utils',或者把文件路径写完整。

另外检查一下src/utils是否存在,webpack的context有没有搞错路径。有时候process.cwd()和__dirname搞混也会出这种问题。

拿去改改,应该就能找到了。
点赞 4
2026-02-07 14:02