Vue从入门到精通（3）--第二阶段：NodeJS、Webpack

Webpack等前端编译环境的出现，才让前端开发结合NodeJS真正进入了工业水平，所以这一章节很重要，对下面知识点和工具的熟悉程度决定了你之后的高度。

第二阶段

1. ES6
2. NodeJS
3. webpack、babel

---

ES6

    短时间内完全掌握ES6的所有语法并不现实，且现阶段浏览器并不完全支持ES6的语法，需要使用babel等转换或前端垫片。不常用的东西就更增加了记忆难度。我用了一晚上和一上午的时间撸ES6的语法，教程依然是阮一峰大神的《ECMAScript 6 入门》

    当然，你也可以一些快速入门的文章，如：
    30分钟掌握ES6/ES2015核心内容（上）
    30分钟掌握ES6/ES2015核心内容（下）
    
    阮一峰大神这本书中深入研究语法的极端用法及语法盲点，但很多并不常用，也不是快速做项目所需要的。目录中总共25章节，除了前几章认真看了，剩下的章节中，全是看前半部分基础语法，后半部分直接忽略。也没有实际动手敲代码测试，但一定要保证知识点都看完，因为后期学习vue、react、angularJS中，会经常涉及到ES6的知识点。

---

NodeJS

    作为前后端分离的开发环境，nodejs在这里充当了js的本地运行环境和模拟服务器的作用。后面的webpack、babel根本上都是些js包，他们依赖于node.js为我们的项目提供服务。所以必须掌握nodejs的使用。
    
    推荐《Node.js权威指南》（百度网盘）这本书。
    
    并不需要全部掌握这本书的全部内容，我只看到“第四章 模块与npm包管理工具 ”。后面的“Buffer二进制、文件操作、TCP/IP、通信、进程、数据库操作、Express”等内容不需要详细了解，毕竟我们做的是前端，而这些章节更侧重于js的本地执行能力。
    
    当然，前后端分离依然需要进行调用服务器返回数据的测试，在后面的vue、react、angularJS等开发脚手架中，都配置了Express模拟服务器，没有学习成本，网上有大量的配置文章，现查现用，不比担心。

---

webpack、babel

    webpack让我苦闷的学习web移动端的日子为之一振，让我感慨的是，web技术已经进入了工业级的水平，而我一直还在用原始的html+js+css+jquery(各种插件)方式做前端。而结合了webpack的nodejs以及各种插件包的开发环境，好比C#有了VS，java有了eclipse/idea。
    
    网上是这么说的：Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。
具体学习推荐如下两个在线教程：

    《Webpack 中文指南》
    《入门Webpack，看这篇就够了》

    这里提供webpack中4个比较关键的配置项说明：
    entry：入口点，webpack会从入口点设置的js文件开始对项目进行构建，过程中，所有入口点通过import或者require依赖的包，都会被打包到output中制定的文件和路径；
    output：中设置打包好的文件的输出路径还有文件名；
    module：主要是loaders，loaders是webpack进行打包的解析器，css、vue、babel、scss都需要用npm安装相应的loader，webpack才能对该格式的文件进行解析和处理；
    plugins：是一些webpack的打包插件，跟解析的语言无关，用来辅助构建，提供丰富的附加功能。

    babel作为webpack的一个loader插件，用来将我们代码中浏览器不支持的ES6的语法，打包时转换成ES5的语法。我并没有深入了解babel的实现原理，紧紧将其作为webpack的插件进行了简单的配置。事实上，webpack还有很多关于css、图片等的loader，可在上面推荐的在线教程中学习。同样的，vue、react、angularJS也有相关的适用于webpack的loader。

    简单来说，webpack是作为各种loader插件的容器。ES6相关的loader将代码转换为等价的ES5代码已获得浏览器的兼容性，js相关的loader将代码优化压缩，图片相关的loader管理图片路径并将较小的图片转换成base64嘛嵌入到html文件中，vue、react等框架的loader将多个框架模块文件代码压缩到一个js文件中。