webpack在vue-cli工程中有什么用

本篇文章給大家分享的是有關webpack在vue-cli工程中有什么用，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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，把它打造成能滿足我們需求的工具，并且把自己做的插件開源出去。

以上就是webpack在vue-cli工程中有什么用，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。