NodeJs

        如果你學過java，你一定知道tomcat，它是一個開源的Web 應用伺服器，當你執行tomcat後，在瀏覽器輸入本地機器的IP地址或者保留IP地址"127.0.0.1"加上專案地址，就可以在本地測試了，java是一門後臺語言。自從2009年NodeJs橫空出世後，無異於給前端界帶來了一場大地震，最主要的原因就是讓好多前端同學也可以做後端同學的事啦，並且只是用javascript這一種語言而已！

       這裡，我們只是用到NodeJs的http模組，並且用的是經過express包裝過的模組，所以看起來程式碼會非常的簡單（紅框標誌的地方）

       Webpack

       這是一個幾年前就已經很火的前端構建工具，想知道它是什麼？為什麼要用它？就看看下面它和市面上其他類似功能的工具的比較吧：

       webpack是一個模組化載入器兼打包工具，它同時支援AMD、CMD等載入規範。與其他模組化載入器相比，最主要的是它有這些優勢。

       1.程式碼分割
       webpack支援兩種依賴載入：同步和非同步。同步的依賴會在編譯時直接打包輸出到目的檔案中；非同步的依賴會單獨生成一個程式碼塊，只有在瀏覽器中執行需要的時候才會非同步載入該程式碼塊。


       2.Loaders
在預設情況下，webpack只能處理JS檔案，但是通過載入器我們可以將其他型別的資源轉換為JS輸出。


       3.外掛機制

       這裡補充一下其他前端工具的一些用處：

       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就行了，它配置簡單，上手容易，常用的功能都有

結尾

現在你已經學會了NodeJs的伺服器模組功能，以及Webpack的簡單配置，那請你回過頭去再看之前那些有nodeJs以及webpack的專案，看看配置檔案和程式碼，是不是就清晰了很多？作為React專案的親密，Webpack幾乎就是為React量身定做的工具，而NodeJs是否真的能完全代替後端語言，這就說不清楚了。