最近由于项目需要，自己开始着手于vue+webpack的学习。作为前端的小白，自己在学习的路上走的太艰难，以下是我在手动构建vue+webpack过程中遇到的各种坑：
1. Error: Can not found webpack commond
描述: 一般遇到这个错误，说明你编写的代码语法与本地安装的webpack版本不兼容。
解决方案: 其实是因为你本地将webpack全局安装了，但是在项目路径下第一次使用这个命令，会让系统找不到，这个时候需要执行以下命令，将全局的webpack关联当前的webpack执行命令
npm link webpack
参考: 无
2. XXXError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
描述: 一般遇到这个错误，说明你编写的代码语法与本地安装的webpack版本不兼容。
解决方案:
1）卸载webpack版本，重新安装需要的webpack版本；
2）查看API，编写正确规范的代码；
参考: 出错的原因是引入入口文件，直接使用了相对路径，这里应该使用绝对路径
文件路径
3. Error: cannot find module 'XXX'
描述: 一般遇到这个错误，说明你本地项目依赖的一些模块或依赖包没有安装
解决方案:
参考:无1）如果直接报出缺少XXX模块，则可以使用npm install {模块名} --save-dev命令进行安装
2）如果不知道，则查看自己项目的package.json,确保包都配置完毕后，使用npm install命令直接安装
参考: 我本地构建项目的时候好多模块丢失，所以反复使用以上的两个命令进行操作
4. Error: Can't resolve '/Project/practice/vue-wkdemo/build/build/dev-client' in '/Project/practice/vue-wkdemo'
描述: 一般遇到这个错误，说明在项目中引入的文件路径写错了，因此执行项目时无法解析
解决方案: 检查自己的项目路径，一定要反复检查，不要理所当然地跳过这个步骤，不然会很坑
参考: 无
5. 最坑没有之一，实现vue+webpack的基础搭建之后，发现没有实现热更新，只有重启服务页面才会显示更改后的内容，不管是修改vue文件，还是html静态页面，都无法生效。这里纠结了大半天。。。
描述: 一般遇到这个错误，有很多种原因，依赖的模块版本不匹配、电脑缓存太多、浏览器停止监听部分端口等等
解决方案: 针对以上的问题，自己可以依次做尝试：
1）可以先检查依赖的模块版本
2）重启电脑，清除浏览器缓存
3）执行以下命令（这是我的一个小伙伴花了两天的时间找的解决方案，我也是这样解决的！）
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf&& sudo sysctl -p
参考: 无
以上就是我遇到的各种坑。。。其余的问题都是和这些坑相似，解决方法套用即可。
最后提及一下自己参考构建vue+webpack的demo项目的来源：
按照上面学习的小伙伴一定要注意依赖包的版本，不然你就会跳进坑里出不来了。。。
网友评论