web前端打包工具有：1、Webpack，是一個模組化管理工具和打包工具可以將不同模組的文件打包整合在一起，並且保證它們之間的引用正確，執行有序；2 、Grunt，一個前端打包建置工具；3、Gulp，用程式碼方式來寫打包腳本；4、Rollup，ES6模組化打包工具；5、Parcel，一款速度極快、零配置的web應用程式打包器； 6、equireJS，是一個JS檔案和模組載入器。
本教學操作環境：windows7系統、Dell G3電腦。
web前端打包工具
#1、Webpack
Webpack: 是模組化管理工具和打包工具，他的宗旨是一切靜態資源皆可打包。可以將不同模組的檔案打包整合在一起，並且確保它們之間的引用正確，執行有序。當webpack處理您的應用程式時，它會在內部建立一個依賴關係圖，映射專案所需的每個模組，並產生一個或多個捆綁包。
透過 loader 的轉換，任何形式的資源都可以視為模組，例如 CommonJs 模組、AMD 模組、ES6 模組、CSS、圖片等。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。也可以將按需載入的模組進行程式碼分隔，等到實際需要的時候再非同步載入。它定位是模組打包器，而 Gulp/Grunt 屬於建置工具。 Webpack 可以取代 Gulp/Grunt 的一些功能，但不是職能的工具，可以搭配使用。
Webpack支援所有流行的模組選項，並已成為React開發的代名詞。雖然Webpack聲稱是一個模組捆綁程序，但是已經可以用作通用任務運行程序了。
2、Grunt
Grunt：最老牌的打包工具，它運用配置的想法來寫打包腳本，一切皆配置，所以會出現比較多的配置項，諸如option,src,dest等等。而且不同的插件可能會有自己擴充字段，認知成本高，運用的時候需要明白各種插件的配置規則。
3、Gulp
Gulp：用程式碼方式來寫入打包腳本，且程式碼採用串流的寫法，只抽象化了gulp.src, gulp.pipe , gulp.dest, gulp.watch 接口，運用相當簡單。更容易學習和使用，使用gulp的程式碼量能比grunt少一半左右。 （PS:此介紹的是gulp3，在gulp4不可用）
4、Rollup
Rollup：下一代ES6 模組化工具，最大的亮點是利用ES6模組設計，利用tree-shaking產生更簡潔、更簡單的程式碼。一般而言，對於應用程式使用 Webpack，對於類別庫使用 Rollup；需要程式碼分割(Code Splitting)，或許多靜態資源需要處理，再或建置的專案需要引入很多 CommonJS 模組的依賴時，使用 webpack。程式碼庫是基於 ES6 模組，希望程式碼能夠被其他人直接使用，使用 Rollup。
5、Parcel
Parcel是一款「速度極快、零配置的web應用程式打包器」。在Web前端培訓中，無論是理論知識，還是實踐專案操作，都會有關於模組打包工具的學習，讓你真正學會使用前端工具。
Parcel有以下這些特點：
#很快
捆綁專案的所有資產
#沒有設定程式碼分割
6、browserify
Browserify支援Node.js正在使用的CommonJS模組，它將所有模組編譯成單一瀏覽器相容的檔案。它是基於流式思想設計，可以透過command line，也可以透過API來使用。僅處理javascript模組化的逆過程，但推動著模組化的更好發展。
7、RequireJS
RequireJS是一個JavaScript檔案和模組載入器。它針對瀏覽器內使用進行了最佳化，但可以在其他JavaScript環境中使用，例如Rhino和Node。使用像RequireJS這樣的模組化腳本載入器將提高程式碼的速度和品質。
掌握這些前端模組化工具的使用將使你的工作更加輕鬆有效，模組化已經成為現代前端工程師的必備技能。
（學習影片分享：web前端）
以上是web前端打包工具有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
