Vue專案開發過程中，會因為很多不同的實際運用需求不斷地對webpack配置進行修改，在此之前，我們需要對webpack有一個基本的認識，瞭解它到底能為我們做些什麼

webpack是一個模組打包的工具，它的作用是把互相依賴的模組處理成靜態資源，如下圖所示。.

webpack的作用：

●　把依賴樹按需分割；

●　把初始載入時間控制在較低的水平；

●　每個靜態資源都應該成為一個模組；

●　能把第三方庫整合到專案裡成為一個模組；

●　能定製模組打包器的每個部分；

●　能適用於大型專案。

webpack的特點：

●    程式碼分割

在webpack的依賴樹裡有兩種型別的依賴：同步依賴和非同步依賴。非同步依賴會成為一個程式碼分割點，並且組成一個新的程式碼塊。在程式碼塊組成的樹被優化之後，每個程式碼塊都會儲存在一個單獨的檔案裡。

●　載入器

webpack原生是隻能處理JavaScript的，而載入器的作用是把其他的程式碼轉換成JavaScript程式碼，這樣一來所有種類的程式碼都能組成一個模組，也就是說，我們可以在程式碼內通過import將webpack打包的資源以模組的方式引入到程式中。

以下是Vue專案中常用到的載入器（它們都是以NPM庫形式提供的）：

vue-loader——用於載入與編譯*.vue檔案；

vue-style-loader——用於載入*.vue檔案中的樣式；

style-loader——用於將樣式直接插入到頁面的<style>內；

css-loader——用於載入*.css樣式表文件；

less-loader——用於編譯與載入*.less檔案（需要依賴於less庫）；

babel-loader——用於將ES6編譯成為瀏覽器相容的ES5；

file-loader——用於直接載入檔案；

url-loader——用於載入URL指定的檔案，多用於字型與圖片的載入；

json-loader——用於載入*.json檔案為JS例項。

●  智慧解析

webpack的智慧解析器能處理幾乎所有的第三方庫，它甚至允許依賴裡出現這樣的表示式：

 require("./components/"+ name + ".vue")

這一點恰恰是browserify不能做到的。

它能處理大多數的模組系統，比如說CommonJS和AMD。

●   外掛系統

webpack有豐富的外掛系統，大多數內部的功能都是基於這個外掛系統的。這也使得我們可以定製webpack，把它打造成能滿足我們需求的工具，並且把自己做的外掛開源出去。