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中文網其他相關文章!