React全家桶之NodeJs和Webpack（四）

       NodeJs

        如果你学过java，你一定知道tomcat，它是一个开源的Web 应用服务器，当你运行tomcat后，在浏览器输入本地机器的IP地址或者保留IP地址"127.0.0.1"加上项目地址，就可以在本地测试了，java是一门后台语言。自从2009年NodeJs横空出世后，无异于给前端界带来了一场大地震，最主要的原因就是让好多前端同学也可以做后端同学的事啦，并且只是用javascript这一种语言而已！

NodeJs的中文网：http://nodejs.cn/api/addons.html，我不建议一上来就看API，那会打击人的自信的。建议先去菜鸟教程看看基础，并且找找自信：http://www.runoob.com/nodejs/nodejs-tutorial.html，你还应该去学express，那是一个官方推荐的基于NodeJs的web应用框架，当你熟悉了基本的语法并且会用后，就可以小试牛刀了。

       这里，我们只是用到NodeJs的http模块，并且用的是经过express包装过的模块，所以看起来代码会非常的简单（红框标志的地方）

       

       Webpack

       这是一个几年前就已经很火的前端构建工具，想知道它是什么？为什么要用它？就看看下面它和市面上其他类似功能的工具的比较吧：

       webpack是一个模块化加载器兼打包工具，它同时支持AMD、CMD等加载规范。与其他模块化加载器相比，最主要的是它有这些优势。

       1.代码分割
       webpack支持两种依赖加载：同步和异步。同步的依赖会在编译时直接打包输出到目的文件中；异步的依赖会单独生成一个代码块，只有在浏览器中运行需要的时候才会异步加载该代码块。


       2.Loaders
在默认情况下，webpack只能处理JS文件，但是通过加载器我们可以将其他类型的资源转换为JS输出。


       3.插件机制
webpack提供了强大的插件系统，当webpack内置的功能不能满足我们的构建需求时，我们可以通过使用插件来提高工作效率。

       这里补充一下其他前端工具的一些用处：

       Gulp/Grunt：Gulp / Grunt 是一种工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp/Grunt，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。

       browserify / webpack ， seajs / requirejs ：这四个都是JS模块化的方案。其中seajs / require 是一种类型，browserify / webpack 是另一种类型。

       seajs / require : 是一种在线"编译" 模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。

       browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。

总结一下，Gulp是一个工具，而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。

注意：

1，如果你对上面的那些黑体字名词一脸懵逼的话，那么建议你去适当了解一下

2，webpack适合用于复杂的较大规模的前端应用，特别适合用于React项目，因为React的组件机制和模块机制对于分割功能代码很适合；webpack的配置过于复杂，配置难&难调试，有时候一旦你配置对了，就不敢再去改配置了，有时候你都不知道怎么 就配置成功了，具体webpack的缺陷请看这里：https://www.zhihu.com/question/34460535

3，如果不是React的项目，并且项目架构不复杂的话，我建议用Gulp就行了，它配置简单，上手容易，常用的功能都有

说了那么多，我们还是要学webpack，我认为最好的入门指南在这里：http://www.jianshu.com/p/42e11515c10f#

结尾

现在你已经学会了NodeJs的服务器模块功能，以及Webpack的简单配置，那请你回过头去再看之前那些有nodeJs以及webpack的项目，看看配置文件和代码，是不是就清晰了很多？作为React项目的亲密，Webpack几乎就是为React量身定做的工具，而NodeJs是否真的能完全代替后端语言，这就说不清楚了。