腳手架vue-cli工程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，把它打形成能知足咱們需求的工具，而且把本身作的插件開源出去。