webpack是什麼？有什麼用？

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