最近一段時間在使用es6+vue+webpack進行開發(fā)记焊，之所以選擇es6，是因為其本身就包含了模塊管理的機制疲扎，利用import關鍵字棚点，基本上就無須再使用requirejs或seajs了早处。另外es6在es5的基礎上，又增加了許多優(yōu)秀的特性瘫析，例如const砌梆，let變量聲明方式默责，解決了討厭的變量提升的問題，=>箭頭函數(shù)又使得我們的回調看起來更為簡潔咸包，等等桃序。　　
　　至于vue烂瘫，簡而言之就是一種mvvm框架媒熊，可以進行數(shù)據的雙向綁定，組件的模塊化忱反，其vue-router插件可以進行前端路由的控制，應該是繼angular之后又一優(yōu)秀的mvvm框架滤愕。
　　webpack是一種基于流式的構建工具温算。我們知道，目前大多數(shù)瀏覽器對es6的支持都還不夠间影，因而我們需要使用一種編譯工具注竿，例如babel將我們的es6代碼轉譯成es5代碼，這樣我們的js代碼就能在目前市面上的所有瀏覽器下使用了魂贬。
　　這里主要說的是webpack這個工具巩割。我們知道，如果在一個項目目錄下執(zhí)行webpack命令的話（當然首先你得裝過nodejs付燥，然后也全局安裝了webpack）宣谈，webpack會自動去找webpack.config.js這個文件，執(zhí)行一下里面的配置键科。當然闻丑，我們也可以使用webpack --config XXX來指定我們的配置文件。所以勋颖，第一次用webpack時嗦嗡，我就想對于生產環(huán)境和開發(fā)環(huán)境，我只需要寫兩份配置文件就好了饭玲。如果是開發(fā)環(huán)境侥祭，執(zhí)行一下webpack --config webpack.config.build.js，如果是生產環(huán)境茄厘，執(zhí)行一下webpack --config webpack.config.dist.js矮冬。
　　這兩份配置文件直到我添加新的項目依賴之前，都工作得很好次哈。當我發(fā)現(xiàn)欢伏，在加入新的項目依賴后，我首先需要去改開發(fā)環(huán)境的配置文件亿乳，接著還得再去改生產環(huán)境的配置文件硝拧，這令我十分不爽径筏。webpack能否像gulp一樣接受參數(shù)，然后按傳參障陶，執(zhí)行不同的流程呢滋恬？很不幸，我沒有找到這種方法抱究。但是npm卻原生支持了傳參恢氯，因而，我們可以利用這npm run XXX來執(zhí)行我們定義好的命令鼓寺。
　　很簡單勋拟，在package.json文件中，我們在“script”后添加一些命令：
　　... 　　"script": { 　　"build": "webpack --progress --colors --watch", 　　"dist": "NODE_ENV=production webpack --progress --colors" 　　} 　　...
　　這樣妈候，我們將配置信息統(tǒng)一寫到webpack.config.js里敢靡，在該文件中，我們利用一個函數(shù)判斷當前是否為生產環(huán)境即可：
　　var isProduction = function() { 　　　　return process.env.NODE_ENV === 'production'; 　　};
　　對于生產環(huán)境或是開發(fā)環(huán)境苦银，當我們需要進行區(qū)別對待時啸胧，就調用一次這個方法，從而使我們能夠在一份配置文件中處理不同環(huán)境的邏輯幔虏。
　　對于開發(fā)環(huán)境纺念，執(zhí)行命令：
　　npm run build
　　對于生產環(huán)境，執(zhí)行命令：
　　npm run dist
　　然而想括，這里還有個小插曲陷谱，如果你使用的是windows操作系統(tǒng)，你會發(fā)現(xiàn)生產環(huán)境的命令并不好使瑟蜈。這里直接給一種解決方案叭首，在package.json中再增加一個命令：
　　... 　　"script": { 　　..., 　　"dist_win": "set NODE_ENV=production&&webpack --progress --colors" 　　}, 　　...
　　windows生產環(huán)境下，執(zhí)行命令：
　　npm run dist_win
　　切記踪栋，"&&"前后一定不要有多余空格焙格，否則windows很可能會截斷命令。
　　工欲善其事夷都，必先利其器眷唉。搞定webpack+npm多元化命令，我們就可以繼續(xù)快樂地碼代碼了~