快捷導(dǎo)航

腳手架vue-cli工程webpack的作用和特點(diǎn)

更新時(shí)間：2018年09月29日 08:36:43 作者：敲代碼的小老頭

webpack是一個(gè)模塊打包的工具，它的作用是把互相依賴的模塊處理成靜態(tài)資源。這篇文章主要介紹了vue-cli工程webpack的作用和特點(diǎn),需要的朋友可以參考下

Vue項(xiàng)目開(kāi)發(fā)過(guò)程中，會(huì)因?yàn)楹芏嗖煌膶?shí)際運(yùn)用需求不斷地對(duì)webpack配置進(jìn)行修改，在此之前，我們需要對(duì)webpack有一個(gè)基本的認(rèn)識(shí)，了解它到底能為我們做些什么

webpack是一個(gè)模塊打包的工具，它的作用是把互相依賴的模塊處理成靜態(tài)資源，如下圖所示。.

webpack的作用：

●把依賴樹(shù)按需分割；

●把初始加載時(shí)間控制在較低的水平；

●每個(gè)靜態(tài)資源都應(yīng)該成為一個(gè)模塊；

●能把第三方庫(kù)集成到項(xiàng)目里成為一個(gè)模塊；

●能定制模塊打包器的每個(gè)部分；

●能適用于大型項(xiàng)目。

webpack的特點(diǎn)：

● 代碼分割

在webpack的依賴樹(shù)里有兩種類型的依賴：同步依賴和異步依賴。異步依賴會(huì)成為一個(gè)代碼分割點(diǎn)，并且組成一個(gè)新的代碼塊。在代碼塊組成的樹(shù)被優(yōu)化之后，每個(gè)代碼塊都會(huì)保存在一個(gè)單獨(dú)的文件里。

●加載器

webpack原生是只能處理JavaScript的，而加載器的作用是把其他的代碼轉(zhuǎn)換成JavaScript代碼，這樣一來(lái)所有種類的代碼都能組成一個(gè)模塊，也就是說(shuō)，我們可以在代碼內(nèi)通過(guò)import將webpack打包的資源以模塊的方式引入到程序中。

以下是Vue項(xiàng)目中常用到的加載器（它們都是以NPM庫(kù)形式提供的）：

vue-loader——用于加載與編譯*.vue文件；

vue-style-loader——用于加載*.vue文件中的樣式；

style-loader——用于將樣式直接插入到頁(yè)面的<style>內(nèi)；

css-loader——用于加載*.css樣式表文件；

less-loader——用于編譯與加載*.less文件（需要依賴于less庫(kù)）；

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

file-loader——用于直接加載文件；

url-loader——用于加載URL指定的文件，多用于字體與圖片的加載；

json-loader——用于加載*.json文件為JS實(shí)例。

● 智能解析

webpack的智能解析器能處理幾乎所有的第三方庫(kù)，它甚至允許依賴?yán)锍霈F(xiàn)這樣的表達(dá)式：