從2015年開始，webpack就是當前最火的構建工具。跟着時代向前走。准沒錯。我們要追隨大神的腳步。走在前端技術棧的前列。大神等等我。
由於webpack是基於nodejs環境下的。所以先安裝nodejs.
一、nodejs的安裝
1.下載nodejs 傳送陣
2.傻瓜式安裝下載好的安裝包
3.在cmd窗口輸入path查看否已配置環境變量，高版本默認好像已配置。反正我重裝系統重新安裝試了一次。沒有則配置一下就行了
注意后兩個文件路徑需配置
4.使用 node -v & npm -v 查看安裝版本檢驗是否安裝成功。
———————————以下步驟更改可參考反正有點坑。我沒有成功。更改了npm 命令都無法執行———————————————————
5.上述步驟安裝完了像下面的圖。除了沒有node_chache和node_global文件夾。更改默認全局配置和緩存的路徑。默認路徑在AppData文件夾。但是對於初學者沒有什么影響。
a.在安裝nodejs文件目錄下新建兩個文件夾node_chache和node_global
b.在cmd執行以下命令：
npm config set cache "E:\軟件安裝\nodejs\node_chache"
npm config set prefix "E:\軟件安裝\nodejs\node_global"
c. 最后在nodejs的安裝目錄中找到node_modules\npm\.npmrc文件
修改如下即可：
prefix = E:\軟件安裝\nodejs\node_global
cache = E:\軟件安裝\nodejs\node_chache
——————————————————————nodejs安裝的坑————————————————————————
注意：1.由於設置上面的操作。更改全局模塊配置。估計是自己使用npm config set prefix不當。導致我的npm的命令都無法執行。重新安裝node了兩次還是不行
媽的，百度了一下一資料。果然有道友也踩到這個坑。
某次執行了npm config set prefix c:/program files/nodejs
結果導致npm執行無響應，且無論如何修改環境變量、卸載重啟均無效。
由於不是報找不到npm命令，所以排除執行路徑不正確的可能。
搜索發現執行config set prefix命令的結果是保存在用戶目錄下的.npmrc文件
將這個文件刪除，npm即恢復執行。
刪除，直接給我刪除。。媽的。
二、webpack的安裝步驟
// 1. 全局安裝webpack（使用webpack -h驗證全局安裝是否成功） npm install webpack -g // 2.安裝webpack到本地項目中。(生成node_modules文件夾) npm install webpack --save-dev // 3.配置項目信息寫入到npm中（生成package.json文件） npm init // 全局安裝開發服務器 npm install webpack-dev-server -g
三、常用操作命令
webpack -p //壓縮混淆腳本，這個非常非常重要！
webpack -d //生成map映射文件，告知哪些模塊被最終打包到哪里了
webpack -w 或 --watch //監聽變動並自動打包
webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）來打包
webpack --display-error-details 查看查找過程，方便出錯時能查閱更詳盡的信息
webpack --colors 輸出結果帶彩色，比如：會用紅色顯示耗時較長的步驟
webpack --profile 輸出性能數據，可以看到每一步的耗時
webpack --display-modules 默認情況下node_modules下的模塊會被隱藏，加上這個參數可以顯示這些被隱藏的模塊
四、安裝額外插件
npm install style-loader css-loader --save-dev
npm install file-loader url-loader --save-dev //對於圖片處理加載器 npm sass-loader less --save-dev npm install extract-text-webpack-plugin --save-dev //獨立打包css文件 npm install vue --save-dev //安裝vue npm install autoprefixer-loader --save-dev // 安裝自動補全css前綴加載器 npm install vue-loader vue-html-loader vue-style-loader vue-hot-reload-api --save-dev npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev
默認的端口號是8080，如果需要8080端口被占用，就需要改端口，webpack-dev-server --port 3000(將端口號改為3000