什麼是 webpack？
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Sass，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。在3.0出現後，Webpack還肩負起了優化項目的責任。
打包：可以把多個Javascript文件打包成一個文件，減少服務器壓力和下載帶寬。 轉換：把拓展語言轉換成爲普通的JavaScript，讓瀏覽器順利運行。 優化：前端變的越來越複雜後，性能也會遇到問題，而WebPack也開始肩負起了優化和提升性能的責任。 我們可以從下圖再次瞭解一下WebPack的作用:
安裝WebPack
具體安裝方法：
用win+R打開運行對話框，輸入cmd進入命令行模式。然後找到你想開始項目的地方，輸入下方代碼：
mkdir webpack_demo
cd webpack_demo
第一句是建立一個文件夾，第二句是進入這個文件夾。這個文件夾就是我們的項目文件目錄了，文件夾建立好後，可以通過下面命令安裝WebPack。
需要注意的是,你在執行下一步時必須安裝node，可以通過 node -v來查看node安裝情況和版本，如果沒有安裝，要先安裝node纔可以繼續進行。
//全局安裝
npm install -g webpack
對項目目錄進行安裝
全局安裝完成後，我們還要進行一個項目目錄的安裝。在用npm安裝前，我們先要進行一下初始化，初始化的主要目的是生成package.json文件（這是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等，如果你對此文件還不瞭解，可以看看node 的相關知識）。
在命令行輸入：
npm init
輸入完成後，npm終端會問你關於項目的名稱，描述……一堆內容，如果你不考慮發佈到npm上，這些內容都不重要，而且我們後期還可以用文本的形式修改這些內容。現在我們只要一路回車就完成了初始化。這時用dir命令已經可以看到生成的package.json文件了。
輸入下面命令進行項目目錄的安裝：
npm install --save-dev webpack
這裏的參數–save是要保存到package.json中，dev是在開發時使用這個包，而生產環境中不使用。
開發環境and生產環境：
開發環境：在開發時需要的環境，這裏指在開發時需要依賴的包。 生產環境：程序開發完成，開始運行後的環境，這裏指要使項目運行，所需要的依賴包。 查看webpack版本
你安裝好後，會想知道你現在webpack版本，在工作中交流時，也會經常問到你，你的打包版本是什麼？這時候我們可以用下面的命令進行查看。
webpack -v
開發環境and生產環境：
開發環境：在開發時需要的環境，這裏指在開發時需要依賴的包。 生產環境：程序開發完成，開始運行後的環境，這裏指要使項目運行，所需要的依賴包。 查看webpack版本
你安裝好後，會想知道你現在webpack版本，在工作中交流時，也會經常問到你，你的打包版本是什麼？這時候我們可以用下面的命令進行查看。
webpack -v
可以看到我現在的版本的3.6.0版本，這是目前（2017/9/16）最新的版本了。出現了版本號，也說明你的webpack安裝成功了。
建立基本項目結構
首先進入上節課我們建立的webpack_demo目錄（每個人建立的位置不同，可能建立在了D盤或者E盤）。進入後在根目錄建立兩個文件夾，分別是src文件夾和dist文件夾：
src文件夾：用來存放我們編寫的javascript代碼，可以簡單的理解爲用JavaScript編寫的模塊。 dist文件夾：用來存放供瀏覽器讀取的文件，這個是webpack打包成的文件。 你可以理解成src是源碼文件，dist是我們編譯打包好的文件；一個用於開發環境，一個用於生產環境。