Vue項目開發過程中，會因為很多不同的實際運用需求不斷地對webpack配置進行修改，在此之前，我們需要對webpack有一個基本的認識，瞭解它到底能為我們做些什麼 webpack是一個模塊打包的工具，它的作用是把互相依賴的模塊處理成靜態資源，如下圖所示。. webpack的作用： ● 把依賴樹按需 ...
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，把它打造成能滿足我們需求的工具，並且把自己做的插件開源出去。
