Webpack5新手搭建配置遇找不到webpack模块报错的咨询
报错根因
执行webpack命令时,系统优先检索全局PATH路径下的可执行文件,调用了已删除的全局webpack残留启动脚本;脚本指向的全局模块路径不存在,触发MODULE_NOT_FOUND报错。项目本地安装的webpack未被调用,是因为当前PowerShell会话未自动将项目本地node_modules/.bin路径加入命令检索范围。
修复操作步骤
- 清理全局路径下的失效残留文件
打开路径C:\Users\mjackson.ZENEX\AppData\Roaming\npm\,删除目录下残留的webpack、webpack.cmd、webpack.ps1三个文件,移除指向已删除全局webpack的启动入口。 - 校验项目本地依赖完整性
在项目根目录执行npm install,确认本地路径下node_modules/webpack/bin/webpack.js、node_modules/.bin/webpack文件存在,排除本地依赖安装不完整的问题。 - 修改PowerShell脚本的webpack调用逻辑
原脚本中直接写webpack --watch会优先匹配全局命令,替换为强制调用项目本地版本的写法,两种可选实现:- 直接指定本地可执行文件路径:
.\node_modules\.bin\webpack --watch --env.development - 复用package.json中已配置的npm脚本:
npm run watch
- 直接指定本地可执行文件路径:
配置修正建议
- 修正
webpack.config.js中resolve.extensions的错误配置:原配置中混入了无效的空字符串项",",会拖慢模块解析效率甚至引发匹配错误,修正为extensions: [".ts", ".tsx", ".js"]。 - 构建命令必须携带环境标识参数,否则配置文件中读取的
env.production、env.development值为undefined,会导致打包产物路径、devtool配置逻辑异常。 - 不需要全局安装webpack、webpack-cli等构建工具,仅保留项目本地依赖即可满足构建需求,全局安装容易引发版本冲突、文件残留等问题。
内容的提问来源于stack exchange,提问作者mjacksongmi
相关产品推荐
相关产品推荐

