最近在学vue，但是在找项目来练习的过程中被webpack折磨得死去活来，心态爆炸了，到底应该怎么办

Question

基础的点已经过了一遍，用<script>写vue的demo没什么问题，在网上找的项目在github找的项目webpack下载下来要么各种报错打不开，打开了也是各种依赖绕蒙圈了，每个项目的结构依赖引用什么的都不同，局部能看懂，但是各种关系就看不懂了，各个目录结构的文件错综复杂，webpack基础的知识也略懂一点，但是应对下载下来的项目完全不够用，完全不是按套路出牌打包，心态崩了。。。请前辈指点学vue和webpack的正确方式

Answer 1

去年我刚开始学包管理项目的时候也是这样，如果学习 VueJS 那么就使用 VueCLI 搭建项目，脚手架会帮你配置好基础的 webpack 设置，你就不需要去关心怎么配置了。

然后是依赖的安装（开发环境/生产环境） -> 制作一个小项目 -> 了解怎么寻找依赖 -> 模仿一个成熟项目

而不是直接上来就看别人已经开发完成的项目，如果要参照也需要配合别的人开发文档/文章或者加教学视频一步一步来而不是生啃，而且不同的依赖版本如果不同的话也会有一些奇奇怪怪的报错。

---

去年看到的一个相对简单的小项目 18分钟，学会使用Vue+Web Audio API开发一个音乐播放器
虽然他是倍速的，但是你可以一段一段的慢慢来看（视频简介中有提供源码链接）。

视频中没有提到安装了一些什么依赖，但是我看他制作的过程，应该使用CLI创建了项目，然后就安装了scss(CSS预编译器)和scss-loader。

在一步一步制作的过程中你就会解开一些小疑问，但是如果不熟悉包管理，一开始还是会很疑惑。
所以在这边我贴上一个当时我学习卡壳的时候经常会去看的一个教学Up主: colin3dmax。
一般在我卡壳的时候就回去寻找差不多主题的教学视频，然后慢慢去了解一定要自己手写过测试DEMO，不然光看等你用到的时候可能就记不得了，动手操作过一次在Coding的过程中会回忆起来。

最后等到你明白什么是包管理之后，再去折腾 webpack 可能会更加得心应手些。

Answer 2

解决问题，也是一种提高，虽然，很可能是一次性的。

找项目练习的话，我的建议是，直接找一个自己想仿的网站，看着最终成品效果，分析产品，划分模块，分解功能，安排任务，一小块一小块的实现。

遇到问题先自行解决，解决不了，再咨询。

Answer 3

1. 坦率地说，如果你会被 webpack 整崩溃，那么将来很大概率还会有很多东西把你整崩溃
2. 项目经验不足的时候，的确很难理解别人的项目结构。即使我现在，看懂一个陌生项目也要花很多时间。

3. 建议：

   1. 自学早期不需要面面俱到。很多东西的诞生和设计有其历史原因，你没经历过就不容易理解，硬看很累。
   2. 所以最好先多写，写的时候会遇到很多问题，然后你就会发现原来某工具可以解决，然后你就理解它为什么要这么做。
   3. 写就一定要写真正能用的东西，类似你问题里的 demo 没啥意义

Answer 4

首先你vue会了吗？vue是vue，webpack是webpack，如果学vue可以下载vue-cli直接进行学，先别过多的专注于打包配置方面，把vue学会了再来关注webpack。

Answer 5

世上无难事只要肯放弃！