元素
元素
工具
博客
问答

Webpack 5迁移后模块解析出错了怎么办？

极客雨萓 阅读 50
工具

我刚把项目从 Webpack 4 升级到 Webpack 5，结果一跑构建就报错，说找不到某些模块，比如 import Something from './utils' 这种写法现在直接提示找不到。

以前在 Webpack 4 里这样写没问题，因为会自动尝试 .js、.vue 等扩展名。查了下文档，好像 Webpack 5 默认不带 resolve.extensions 的默认值了？但我明明没动过配置啊……

我的配置里现在是空的 resolve 部分，是不是得手动加上？比如：

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json']
  }
}

但加了之后还是有些路径报错，特别是用了别名的，比如 @/components，之前能用，现在不行了。是我漏了什么配置吗？

我来解答 赞 12 收藏
二维码
手机扫码查看
反馈
2 条解答
百里梓萱
百里梓萱 Lv1
Webpack 5 确实把 resolve.extensions 的默认值移掉了，你配置空的它就真的空的，所以找不到模块。

先把这个加上：

module.exports = {

  resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      '@': require('path').resolve(__dirname, 'src')

    }

  }

}

``



别名不生效大概率是路径写错了或者没配置对。你用的是 require('path').resolve(__dirname, 'src') 这种写法吗？如果用的是 webpack 的别名配置方式，得确保路径正确。



还有一点，如果你的项目用到了 resolve.modules`，比如自定义的 node_modules 目录，也得显式配一下，Webpack 5 同样不给你默认值了。



如果上面都配了还是不行，看下报错信息具体是哪种找不到——是相对路径找不到还是别名找不到，这两个排查方向不一样的。



对了，还有个坑：如果用了 webpack-chain 或者类似的方式配置，得确认配置有没有正确合并进去，有些人是这里坑了的。
点赞 1
2026-03-13 08:07
小志煜
小志煜 Lv1
Webpack 5 为了性能把默认扩展名砍了，必须手动补全。@ 别名失效是因为 alias 没配，把下面这段代码塞进配置里就行了。

const path = require('path');

module.exports = {

  resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      '@': path.resolve(__dirname, 'src')

    }

  }

}
点赞 1
2026-03-03 21:01
相关推荐
元素
元素
工具
博客
问答
登录/注册