webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等，當然，要使用webpack當然得先搭建一個webpack環境，由於之前搜索過很多文章，但是並沒有安裝成功，一番折騰之下，最後終於安裝成功，
注：此安裝方法我在Ubuntu12.04 LTS,14.04 LTS,和16.04 LTS上試過都是可以成功安裝的。
1.安裝nodejs和npm
npm是隨同nodejs一起安裝的包管理工具，能解決nodejs代碼部署上的很多問題,webpack的安裝也依賴於nodejs和npm，所以先來安裝nodejs和npm。
很多同學可能之前通過這種方式安裝過nodejs：
sudo apt-get update
sudo apt-get install nodejs如果之前通過這種方式安裝之後webpack無法正常安裝的話建議把原來的先卸載了吧，可能版本太低了。卸載：
sudo apt-get autoremove --purge nodejs
sudo apt-get autoremove --purge npm再安裝新的版本：
從nodejs官網下載對應操作系統的nodejs，比如我的系統是Ubuntu14.04LTS,64位，下載對應的v6.9.2版本：
將安裝包下載後解壓，然後移動或複製到/opt/目錄（一般自己下載的軟件放在這個目錄下面）
sudo mv node-v6.9.2-linux-x64 /opt/
如果之前嘗試安裝時設置過node和npm軟鏈接，建議先刪除：
sudo rm -rf /usr/local/bin/node
sudo rm -rf /usr/local/bin/npm之後設置node和npm軟鏈接，設置軟鏈接的目的是在任意目錄都可以直接使用node和npm命令：
sudo ln -s /opt/node-v6.9.2-linux-x64/bin/node /usr/local/bin/node
sudo ln -s /opt/node-v6.9.2-linux-x64/bin/npm /usr/local/bin/npm設置完軟連接應該就已經安裝成功
安裝成功在任意目錄下輸入：
node -v //6.9.2
npm -v //3.10.9如果出現版本號說明安裝成功！
2.安裝webpack
安裝完nodejs環境之後就可以安裝webpack打包工具了，建議最好先全局安裝一下：
npm install webpack -g
安裝完在命令行輸入webpack
如果提示命令找不到就設置一下軟連接：
sudo ln -s /opt/node-v6.9.2-linux-x64/bin/webpack /usr/local/bin/webpack（webpack是否全局安裝可以到/opt/node-v6.9.2-linux-x64/bin/查看）
3.安裝webpack-dev-server
webpack-dev-server的作用是不用每次修改完代碼都要重新執行一次webpack命令去打包，對於我們來說，改完就能實時打包並刷新頁面是多麼方便!
建議也是全局安裝：
npm install webpack-dev-server -g
安裝完在命令行輸入webpack-dev-server
如果提示命令找不到就設置一下軟連接：sudo ln -s /opt/node-v6.9.2-linux-x64/bin/webpack /usr/local/bin/webpack
（webpack是否全局安裝可以到/opt/node-v6.9.2-linux-x64/bin/查看）
3.安裝webpack-dev-server
webpack-dev-server的作用是不用每次修改完代碼都要重新執行一次webpack命令去打包，對於我們來說，改完就能實時打包並刷新頁面是多麼方便!
建議也是全局安裝：npm install webpack-dev-server -g
安裝完在命令行輸入webpack-dev-server
如果提示命令找不到就設置一下軟連接：sudo ln -s /opt/node-v6.9.2-linux-x64/bin/webpack-dev-server /usr/local/bin/webpack-dev-server
（webpack-dev-server是否全局安裝可以到/opt/node-v6.9.2-linux-x64/bin/查看）
webpack-dev-server 提供了兩種模式用於自動刷新頁面：
A:iframe 模式：
工程目錄向下命令行輸入webpack-dev-server
這種情況我們不訪問 https://localhost:8080，而是訪問 https://localhost:8080/webpack-dev-server/index.html
B：inline 模式：
工程目錄向下命令行輸入webpack-dev-server --inline
在命令行中指定inline模式，這樣 https://localhost:8080/index.html 頁面就會在 js 文件變化後自動刷新了。
以上說的兩個頁面自動刷新的模式都是指刷新整個頁面，相當於點擊了瀏覽器的刷新按鈕。
至此，安裝完成webpack！