本教程操作環(huán)境：windows7系統(tǒng)、Dell G3電腦。

web前端打包工具

1、Webpack

Webpack: 是模塊化管理工具和打包工具，他的宗旨是一切靜態(tài)資源皆可打包。可以將不同模塊的文件打包整合在一起，并且保證它們之間的引用正確，執(zhí)行有序。當webpack處理您的應用程序時，它會在內(nèi)部構(gòu)建一個依賴關系圖，映射項目所需的每個模塊，并生成一個或多個捆綁包。

通過 loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片等。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。它定位是模塊打包器，而 Gulp/Grunt 屬于構(gòu)建工具。Webpack 可以代替 Gulp/Grunt 的一些功能，但不是一個職能的工具，可以配合使用。

Webpack支持所有流行的模塊選項，并已成為React開發(fā)的代名詞。雖然Webpack聲稱是一個模塊捆綁程序，但是已經(jīng)可以用作通用任務運行程序了。

2、Grunt

Grunt：最老牌的打包工具，它運用配置的思想來寫打包腳本，一切皆配置，所以會出現(xiàn)比較多的配置項，諸如option,src,dest等等。而且不同的插件可能會有自己擴展字段，認知成本高，運用的時候需要明白各種插件的配置規(guī)則。

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)，或者很多靜態(tài)資源需要處理，再或者構(gòu)建的項目需要引入很多 CommonJS 模塊的依賴時，使用 webpack。代碼庫是基于 ES6 模塊，而且希望代碼能夠被其他人直接使用，使用 Rollup。

5、Parcel

Parcel是一款“速度極快、零配置的web應用程序打包器”。在Web前端培訓中，無論是理論知識，還是實踐項目操作，都會有關于模塊打包工具的學習，讓你真正學會使用前端工具。

Parcel有以下這些特點：

• 很快

• 捆綁項目的所有資產(chǎn)

• 沒有配置代碼拆分

6、browserify

Browserify支持Node.js正在使用的CommonJS模塊，它將所有模塊編譯成單個瀏覽器兼容的文件。它是基于流式思想設計，可以通過command line，也可以通過API來使用。僅處理javascript模塊化的逆過程，但是推動著模塊化的更好發(fā)展。

7、RequireJS

RequireJS是一個JavaScript文件和模塊加載器。它針對瀏覽器內(nèi)使用進行了優(yōu)化，但可以在其他JavaScript環(huán)境中使用，例如Rhino和Node。使用像RequireJS這樣的模塊化腳本加載器將提高代碼的速度和質(zhì)量。

掌握這些前端模塊化工具的使用將使你的工作更加輕松有效，模塊化已經(jīng)成為現(xiàn)代前端工程師的一項必備技能。

（學習視頻分享：web前端）

以上就是web前端打包工具有哪些的詳細內(nèi)容，更多請關注風君子博客其它相關文章！

總結(jié)

以上是生活随笔為你收集整理的web前端打包工具有哪些的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。