一、什么是nodejs
二、什么是node
三、npm的簡單使用
四、webpack介紹
一、什么是nodejs
打開Nodejs英文網：https://nodejs.org/en/
中文網：http://nodejs.cn/
我們會發現這樣一句話：
翻譯成中文如下：
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。
Node.js 的包管理器 npm，是全球最大的開源庫生態系統。
1.什么是JavaScript？
javascript是一門運行在瀏覽器端的腳本語言，用來做客戶端頁面的交互。
2.JavaScript的運行環境呢？
故名思意他的運行環境就是瀏覽器，但是真的是這樣的嗎？其實不然，他的真正運行環境其實是運行在瀏覽器內核中的js引擎。為什么是這樣的了？因為通俗來講瀏覽器得作用就是用來瀏覽網頁得，我們在瀏覽器除了執行js外還能執行其他得東西，比如我們在瀏覽器輸入一個地址敲回車就可以發送請求並且接收服務器得響應。所以說瀏覽器的第一功能是請求一個http地址，也就是可以封裝一個請求報文出來，將一個url的地址封裝成一個請求報文，這個報文到服務端，然后給我們一個響應報文，然后在將響應解析出來，這也是瀏覽器的最大的作用。當然服務器響應的內容有可能不一樣，比如說服務器返回一個html文件，css文件，img文件，用來渲染，我們稱之為渲染引擎，除此之外，還可以執行js，由js引擎來完成，因此可以說javascript的運行環境是瀏覽器中的js引擎，而不是瀏覽器。瀏覽器是一個大的概念。
瀏覽器的javascript可以做什么？
3.瀏覽器中的javascript可以做什么
之前由提到過，javascrip就是用來做交互的，但是籠統的說交互有點不明確，具體一點可以分為：“
（1）操作dom（也就是對dom的增刪改，注冊事件之類的事情）
（2）發送AJAX請求/跨域
（3）BOM交互如給我們提供頁面跳轉，歷史記錄，控制台打印日志
（4）ecmascript(js的核心語言，如用來定義變量，函數等)
4.瀏覽器端的javasscript不可以做什么？
通過之前的了解，貌似javascrip對我們日常的交互都可以完成，貌似什么都可以做，但是他也有不能做的事。如：
（1）涉及到端對端的應用程序，我們需要操作文件，瀏覽器中的javascript是不能進行文件操作的，雖然h5里面提供了關於文件相關的API，但是這些API大多數只限於只讀的層面 ，不能像傳統的語言如java,通過傳一個路徑，然后將對應的文件讀出來，說白了就是不能進行文件和文件夾的CURD.
（2），瀏覽器端的javascript也沒有辦法去操作操作系統，如獲取操作系統的版本之類的。
那么為什么不能進行這兩類操作？其實是出於安全考慮，因為，js這門語言運行的環境比較特殊，說他特殊，特殊在什么地方？雖然我們編寫好的js代碼最終會放在服務器上，但是他畢竟不是在服務器上執行的，而是通過服務器發送到瀏覽器端執行的，在瀏覽器端執行文件的操作顯然是不安全的，因此說這些功能在客戶端不是不能做，而是由於特殊的運行環境沒法做
5.了解了客戶端的js所能做的事，我們必須還要明確一個概念，那就是javascrip只能運行在瀏覽器端嗎？
前端開發人員都知道，javascrip是有ecmascrip語言，BOM，DOM組成的，在語言層面，她只是給我們提供一些操作語法，如定義變量，函數，類型，流程控制等的操作。而BOM，DOM是瀏覽器提供的，並非es提供的。因此我們常提及的js其實就是es，js的大部分功能（DOm，BOM（瀏覽器開放出來的API）等的操作）都是由 瀏覽器的執行引擎決定的 ，這也衍生出一個觀點，任何一門編程語言 ，他的能力不是由語言本身決定的，而是由他的執行環境決定的。比如說java，他即是一門語言也是一個平台，對於javascript來說語言就是es，平台是瀏覽器。那么js只能運行在瀏覽器中嗎？非也！對於大多數語言，都是運行 在一個平台上的，比如java只運行在虛擬機上，但是也有運行在多個平台的語言, java在一定層面上來講是沒有必要運行在多個平台上的，因為虛擬機是跨平台（也就是跨操作系統如window，linux等）的。js同樣是可以運行在多個平台的，瀏覽器之所以能過運行js，是因為他由js的執行引擎。js同樣，只要由支持他的平台就可以執行。因此說要想語言有很強大的功能，只需要提供強大的平台，node就是這樣一個平台，能夠執行js，那么node到底是什么東西？
二、什么是node
根據官方文檔可以知道，node就是一個給予谷歌v8引擎的一個javascript的運行時，可以理解為運行js的一個虛擬機。他使用的是一個 事件驅動，非阻塞I/O模型 ，他是將js的運行環境搬到了服務器端，和客戶端沒有一點關系。是一個純服務端的東西，node只是為js提供了一個平台。node里面其實還分了兩塊，一是封裝了v8引擎，目的是為了執行es（如定義變量，定義函數等），另外一個提供了大量的工具庫,是幫助node實現各種功能的，提供了一些以前js的環境辦不到的事情，比如文件操作，網絡操作，操作系統的操作。
既然node是一個平台（所謂的平台就是用來運行特定語言的），也就意味着node是用來運行語言的，那么java也是語言，node能運行java嗎？據nodejs創始人Ryan Dahl回憶，他最初是選擇了Ruby這門語言，但是Ruby這門語言的虛擬機效率不怎么樣最終放棄了，按照這種思路，貌似node將java的虛擬機集成進來應該可以運行java，但node作者最終選擇了javascript。這樣js就實現了在服務端運行的可能，js運行在node平台上（分為v8部分，用來執行es，和大量的工具庫組件（API）稱之為libuv，提供了以前js的環境辦不到的事，如文件操作，網絡操作等等）。
知道了什么是node,應該還要清楚node在web中有什么用途？
（1）node可以接受客戶端用戶的所有請求，並且能夠快速的給出響應，因此node可以用來做網站。
（2）node可以作為一個中間層來來分發調用數據接口，比如有一個網站數據是有java提供的，我們可以讓node作為一個中間曾，來接受用戶的請求，然后通過node來調用java數據接口，獲取到數據后直接在node層面做html的瓶裝，然后將渲染好的頁面直接給用戶。為什么要這樣做，直接請求java接口不行嗎，這是因為node被稱之為高性能的web服務器，在並發和抗壓方面都比傳統的平台要好很多，因此這樣一包裝可以極大的減輕服務器的開發。
通過上面的兩點，可以總結出，node在web中要么從前端頁面到后端服務全包了，一個是只做其中的一點。
一言以蔽之，node就是一個javascript的運行環境（平台），他不是一門語言，也不是javascript的框架。可以用來開發服務端應用程序，web系統。其特點是體積小，快速，高性能。
三、npm的簡單使用
1.先安裝nodejs環境，這樣就可以使用其中的npm了
https://nodejs.org/en/
2.安裝后檢測是否安裝成功
node -v
npm -v
3.由於npm更新頻率比node.js高，因此npm版本可能不高，需要升級的話，用這個命令
npm install npm@latest -g
4.npm可以用來下載jquery，bootstrap等等，但是要先創建項目
1.新建文件夾項目后，npm初始化
npm init
2.npm安裝的模塊分為兩類dependencies和devDependencies，分別對應生產環境需要的安裝包和開發環境需要的安裝包。
npm install jquery --save # 生產環境安裝jquery
npm install bootstrap --save-dev # 開發環境安裝bootstrap
npm install jquery@2.0.1 --save # 下載指定版本
npm uninstall jquery # 卸載，會自動在package.json中刪除寫入的模塊
3.如果package.json中開發環境和生產環境中的模塊自己電腦上沒有，運行npm install可以自動下載
npm install
由於npm是國外的服務器，因此可能出現網絡問題，可以使用國內源cnpm，用法與npm一樣
npm install -g cnpm --registry=
https://registry.npm.taobao.org
四、webpack介紹
中文鏈接地址：https://www.webpackjs.com/
1.為什么要使用webpack？
現今的很多網頁其實可以看做是功能豐富的應用，它們擁有着復雜的JavaScript代碼和一大堆依賴包。為了簡化開發的復雜度，前端社區涌現出了很多好的實踐方法
* 模塊化，讓我們可以把復雜的程序細化為小的文件;
* 類似於TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，並且之后還能轉換為JavaScript文件使瀏覽器可以識別；
* Scss，less等CSS預處理器
* ...
這些改進確實大大的提高了我們的開發效率，但是利用它們開發的文件往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常繁瑣的，這就為WebPack類的工具的出現提供了需求。
2.什么是webpack
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。
中間那個是webpack的圖標，可以看作webpack這個工具。左邊是我們項目生產環境下所以來的包，通過這個webpack工具我們可以打包所有的圖片，所以的腳本，所有的樣式等等，最后打包成了右邊的靜態資源文件。
注意了：每個webpack的版本都有不同的功能，而且高版本的webpack可能會出現意想不到的bug，在這里推薦大家使用2版本的webpack。
另外webpack還支持我們的模塊化加載, 這讓我們更加快速的開發。