我来简单说说吧，从你的问题中，我感觉楼主你的基础底子还是有点薄弱的，你说的那些东西像bable，webpack，或者别的什么ng2,vue等等其实都是属于JS的工具或者框架或者库，如果你的JS基础或者功底足够，去了解这些东西你会发现你其实上手很快的，如果你JS功底不行，当然肯定也就不怎么看得懂，说到底还是因为功底问题。

建议你可以先看看HTML，CSS和JS方面一些基础的书籍，系统的了解学习下，思维上有了一个架构然后再去看别人的代码，流行的工具等等，弥补自己的不足。

同时往后的话建议也要看一些比如code complete，clean code这样的书增长自己的代码功底，也要了解一些编程思想，设计模式，算法等等，这些可以以后慢慢补充。

如果你系统学习过你就会知道ECMAScript是什么，一般js书籍开头在介绍JS的时候肯定会介绍js的历史，构成等等信息，进而在学习node.js的时候你就会知道node.JS是什么什么东西CommonJS是什么东西了。

vue？没用过，因为公司没有用他。如一楼所说：你看vue文档看不懂，说到底还是js基础太浅薄了。用好各类框架，首先要学好原生js。感觉是句屁话，但是你得承认，这是事实，框架只是人家借助原生集成出来的辅助工具，但是任何一个框架都逃不了被取代或者优势弱化的趋势（曾经的jq就是的），然后你会发现你一离了框架，做什么都眼高手低。所以，先不急去看框架（如果公司没有让你用的话），先把原生js过一下级，进进阶。一味的追求框架，会导致自己舍本逐末的。就如知乎上有一篇：《2016学前端是一种什么样的体验》这篇文章一样，各种框架，你能学的过来？所以对于楼主这个问题，结合我现在的计划：首先，我目前不会去深入学任何一种框架，除非在工作中需要用到，部门老大让我学。其次，我仍然觉得自己的js还不过关，我给自己的心理预期是，能比较轻松造出一些实用的插件，能轻松看完jq底层代码，然后把js比较经典的几本书通读至少2遍...基本上达到这一点后我才会考虑去了解一些框架

很佩服这样细心的人。不过我的学习方法完全不是这样的。 有什么好担心的，一开始就大胆去尝试，先有感性的认识。需要你学习什么、注意细节的时候，你自然会去再仔细看和研究。

别让学过的知识成为学习新东西的羁绊。

学习前端要【发散式思维】
最开始我自学javascript也想知道哪些是基础，然后想一步一步循序渐进，后来发现所谓的基础很少，大部分知识点散而多。

举例来说，最开始写JS实例，可能是一个【下拉菜单】，然后发现【TAB选项卡】原理和下拉菜单原理很相近,然后又发现【slider轮播图】的原理和index控制的选项卡也原理相同，再又发现了【冒泡、事件委托】等等。。。

就是不断发散，让所有散乱的知识点之间产生联系，并不是必须要先学哪个，才能继续学另外的知识

针对楼主的问题：
1、ECMAScript是一个标准，就像CSS2.0/3.0一样，实际我们使用的JS不是ECMAScript的任何一个具体版本，而是它的实现，也就是说像CSS一样，只要浏览器厂商支持，你可以写2.0也可以写CSS3，混着写也行。

2、WEBPACK只是无数前端工具之一，只是现在比较火，搭配VUE用的人多，其他的还有GULP、GRUNT等等，它既不是一种编程语言，也不是什么高深的东西，网上有很多在线压缩JS/CSS，在线编译SASS/LESS，在线生成雪碧图一大堆工具，以前都是用那些，现在可以把诸如此类的功能都用WEBPACK实现，就这么回事，有兴趣可以学学，没兴趣不学就不是什么大不了的事，除非公司强制要用。

**3、babel，这个就更简单了，就是把ES6编译成ES5，它搭配webpack就是babel-loader，搭配gulp就是gulp-babel，像我以前不用gulp和webpack，可以直接在sublime Text3上装个就用。。就是个编译器。
顺带一提，IE8连ES5都不支持，所以如果你有要兼容IE8及以下的场合，ES6ES5Babel都可以扔**

最后还是那句话，学习前端是发散性思维，不要给自己一堆条条框框的计划，知识点之间没有绝对的前后基础关系，计划死了到头来也是一团乱麻，从实例着手，再发散到其他知识和实例

既然你诚心诚意的问，我就大发慈悲的回答你。?

咱们一条一条的来看。

1.缺了哪些知识
我也猜不出你具体是什么水平。所以列出来的都是一些比较关键的问题。

• 原生js操作DOM、jQuery操作DOM

• js事件

• js对象

• js原型

• js面向对象编程

• 模块化

• 组件化

2.ECMAScript2015、bable、webpack
我想你现在只是知道这些东西，也能跟着网上的教程写点小玩意儿。但是，你不理解这些东西具体是什么，用来干嘛，怎么用。没关系，遇到这些新东西，就跟着官方文档一点点模仿就对了。模仿是学习新玩意儿最好的方式。

• 对于ES6（ECMAScript2015），如果你熟悉js的语法，你只需要去看看ES6的基本语法。首先let、const、箭头函数，变量结构赋值、模板字符串，这五项你得先明白，这会解决你70%的语法障碍。如果遇到其他的不明白的语法，则直接查相应的资料。阮一峰老师的《ECMAScript 6 入门》在网上开源，讲解的非常清晰，通俗易懂，地址在这里：ECMAScript 6 入门。其他的ES6相关内容，不建议你在深入ES5之前去深入，只要明白使用就好。其他的功夫，你可以花在ES5的深入学习上。

• babel 是一个代码转换器。现市面上的5大主流浏览器对ES6的支持暂时不足，不能运行。所以，有个很聪明的外国人就做了一个转换器，让你写ES6语法的代码，它帮你转换成ES5的。ES6比ES5先进好用，所以用ES6会很爽。但是，这需要你对ES5比较熟悉。（几个小问题：js对象是地址引用的你明白吗？数组是地址引用的你知道吗？js原型链是什么?）。

• webpack是一个前端工程化的完整解决方案。意思是说，它是一系列功能的集合体。要理解它，你首先要明白模块化。
  我知道，模块化这个东西说起来简单，但是它是一个概念主要的名词。所以，新人学习这东西的时候确实有点麻求烦。不过，请相信我，它真的很简单。学习它建议你学习一下CMD，nodejs实现的CMD模块化规范。网上大部分的文章你看着肯定会懵逼。它们没有解释到精髓。我是在《深入浅出node.js》里面2.1.2小节--> "CommonJS的模块规范" 里面看到的解释最为精髓易懂。可以在网上找到相应的资料。

3.场景、解决的问题、如何解决、解决结果

• 场景：最开始vue.js这些MVVM框架是为了解决SPA单页应用的开发问题。现在也不局限在SPA了，而是用来解决复杂的、大型的web应用了。

• 解决的问题：前端开发三个痛点：

  • 大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

  • 开发者在代码中大量调用相同的 DOM API, 处理繁琐 ，操作冗余，使得代码难以维护。

  • 界面展示数据，用户操作产生事件，事件需要反馈，也代表着我们要处理用户的行为。当页面很复杂的时候，处理数据和界面相对应的变化，会很头疼。MVVM框架（此处为vue）帮我们做了一些事，让我们可以操作数据，界面相对应的就变化了。

  • 拓展阅读：Vue.js 和 MVVM 的小细节

• 如何解决？

  • 这个就不是几句话能说明白的。虽然不难，但是很啰嗦。

  • 你知道的，前端很多东西就是很分散的。

• 解决结果

  • 结果就是大家都很开心的用vue这些MVVM框架来开发了呀。

  4.书上学的大部分是ES3和ES5。ES为主。FF、Chrome、Opera、Safari这些的新版本对ES5的支持已经很完善了。IE9部分支持，IE10支持比较完善。

• 如何过渡？用bable啊！ES6的语法来写代码，bable帮你转换成ES5的，完美！

5.建议
《JavaScript高级程序设计》是一本不错的进阶书籍。读一遍吧。读完这本书，才算是js入门了。

node.js gulp webpack ES6 npm 接触过这些之后vue.js就能比较容易弄明白。说白了底层也是js及工具包的整合。

照着案例来，大胆的敲代码，遇到问题GOOGLE，stack overflow，或者在segmentfault提问，框架的问题，多用用就会了

之前对 ES6，Webpack，Vue 的接触几乎为 0，硬啃了两天文档看了几个别人的 demo 上手了，感觉 ES6 的话，稍微了解点 module 那块就好了，代码看多了也就慢慢习惯了，Webpack 还不了解，用了 vue-cli

觉得还是得实践，自己写代码，我写的三个入门级 demo 供你参考 https://github.com/hanzichi

其实我学的也不是很好，但是我可以给你这方面一点建议

在学习vue之前呢，你要确保你的原生js没有问题（一些基础性的概念），如果你的原生js没有问题了，那这些框架对于你来说就不会有太大的问题（框架嘛，就是基于原生js基础上的一些封装，本来就方便与我们开发的），那些框架的概念会在你的事件中融会贯通，因为每个框架都有他个人的魅力

你要记住，千万不要纸上谈兵，即使不会写项目，也要看着官网的示例代码敲一敲，敲得多了犯的错多了，会解决错误了，这样你才可以很好的运用它。

还有，不要在开始学一些东西之前就有计划要做什么什么储备，因为这会拖垮你的精力，不要怕，直接去用它，出了问题去解决它，什么不会再去学它，就想你去看一本javascript高级程序设计，你从头开始一页一页的看，有多少次你都是又从头翻开，但是你要你每次都看一看目录呢，看看哪里不太熟练，又或者在遇到问题之后再去翻一翻，那会有不一样的效果，事半功倍。

总之就是这样，我就不啰里啰嗦了，加油~

看了大家的回答，感觉很多人都没说到点子上
大概大家对如何有效的掌握一门新的框架也是一头雾水吧
为了给题主解惑，以及各位如此耐心回答问题的朋友提供一个学习思路，所以我决定要抖点干货。
主题就是《如何快速掌握一种框架》，方法适用于目前所有的流行框架

最近前端比较流行的几类框架，包括Vue，weex，react, react native, 以及小程序
他们有一个共性，就是，组件化的思维非常非常非常重要

组件如何创建？
在组件中，数据如何传递？
组件与组件之间如何交互？
如何合理的划分与组合组件？
这些问题你搞明白了，你就会发现，其实掌握一个框架，还是没有想象中那么难的。

我并不愿意一上来就说别人基础不好，其实大多数所谓的基础不好，只不过是有的知识没记住嘛。
但是有一个基础，那一定是要牢牢的刻在脑子里的，那就是题主自己提到的模块化思维。

因为组件是基于模块化思维的。

而关于模块化，这几年就有好多个模块化的规范。
CMD，AMD，commonjs，以及最新的ES6的模块思维。
我们抛开他们的具体原理不谈，单从使用者的角度来说的话，其实道理都是一样的。
所以，只需要掌握其中一种，另外的，也只是语法表现不一样而已。
既然最新的是ES6，那么干脆就建议大家按照ES6的来吧，现在很多文档教程也是基于ES6来写的。
那么总要我们自己去搞明白import，export这些是来干嘛的对吧。
基础语法不多说，耐心花一个小时认真了解一下就基本OK了。

但是想要凭空了解模块化也是没那么容易的。因为模块化，恰恰是基于js的面向对象思维。
啊，这个时候，终于和基础知识扯上关系了。学习面向对象，推荐前面有同学提到的《JavaScript高级编程》

所以你至少需要了解常规的创建对象是怎么玩的，单例模式是怎么玩的，订阅-通知模式是怎么玩的。

订阅-通知模式涉及到数据的管理与组件的交互，因此异常重要，具体实现与重要性可参考redux。

所以我给题主的学习路线建议如下

1. 面向对象，设计模式中的单例模式与订阅-通知模式，这里建议通过ES5的语法进行学习
2. 搞明白为什么要模块化
3. 模块化，这里开始，可以结合ES6的语法来学习ES6的模块化思维，
   如果你没有ES6的开发环境，就建议通过require.js来学习模块化。     

4. 组件化

5. 以及需要支撑这条学习路径的所有基础知识。

尽管这里面涉及到的内容很多，但是当你真正完成此路径之后，你就已经掌握了ECMAScript在使用角度上的核心了。
你将不会畏惧去重新学习任何新的框架。

就比如大家都在说小程序入门简单，其实是建立在你的这整套思维都完善的情况下的，否则你仍然只能最多按照官方文档写写小例子，并没有什么卵用

至于解决了什么问题，这个等你把组件化搞清楚再来考虑吧，简单的篇幅还真讲不清楚。
这里你可以给自己留2个思考题，在模块化思维下，如何实现

1.在一个app中，设置切换皮肤，整个app的皮肤就自动切换了
2.点击了一个组件的按钮，另一个组件的颜色大小都发生指定的变化

另外为了减轻学习压力，我有几条额外的建议

• 做好脱离jquery的思想准备，也就是多数框架的组件化中，我们不再需要获取DOM元素

• 和数据处理有关的方法都要重点关注

• 暂时不要考虑动画与交互如何实现

• 不要被各种语法的变化吓到，比如ES6与ES5相比，只是同样的功能，换了一种语法而已。语法永远都是没有学习障碍的，记住：只要是语法的问题，都不是问题

最后分享一点小干货，多种方式实现拖拽
看懂了此例子将会对你学习进步的帮助非常大