首頁 > web前端 > js教程 > 主體

webpack是什麼?有什麼用?

不言
發布: 2018-10-25 15:19:28
原創
12838 人瀏覽過

webpack是什麼? webpack又有什麼用? 這篇文章將要為大家介紹一下webpack的意思以及webpack的使用方法,有需要的朋友可以看一看,希望對你有幫助。

話不多說,我們直接進入正題~

webpack是什麼?

我們可以從官網上知道:本質上,webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時,它會遞歸地建立一個依賴關係圖(dependency graph),其中包含應用程式所需的每個模組,然後將所有這些模組打包成一個或多個 bundle。

簡單的來說,WebPack可以看做是模組打包機:它做的事情是,分析你的專案結構,找到JavaScript模組以及其它的一些瀏覽器不能直接運行的拓展語言(Scss, TypeScript等),並將其打包為適當的格式以供瀏覽器使用。

所以接下來我們就來看看webpack有什麼用?

我們先來簡單說一下webpack的工作原理:

在一個設定檔中,指明對某些檔案進行編譯、壓縮、組合等任務。把你的專案當成一個整體,透過一個給定的主文件(index.js),webpack將從這個文件開始找到你的專案的所有的依賴文件,使用loaders處理他們,最後打包為一個瀏覽器可以識別的js檔。

webpack的理念就是一切皆模組化,把一堆的css檔案和js檔案放在一個總的入口文件,透過require引入,剩下的事情webpack會處理,包括所有模組的前後依賴關係,打包、壓縮、合併成一個js文件,公共程式碼抽離成一個js檔案、某些自己指定的js單獨打包,模組可以是css/js/imsge/font等等。

下面我們就具體來看webpack的用法

1、webpack可以根據模板產生HTML,並自動處理上面的css/js引用路徑

#2、webpack可以自動處理裡面的圖片路徑,css裡面背景圖的路徑,字型參考

#3、webpack可以開啟本機伺服器,一邊改寫程式碼,一邊自動更新頁面內容

#4 、webpack可以編譯jsx    es6     sass     less    coffescript等,且新增md5、sourcemap等輔助

5、webpack可以非同步載入內容,不需要時不載入到Mwebpack#可以配合#web#webpack#fDOMwebpack>可以配合#-web vue.js和react.js等框架開發。

這篇文章到這裡就全部結束了,更多關於webpack相關知識大家可以關注php中文網! ! !

以上是webpack是什麼?有什麼用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板