學(xué)Web前端有必要學(xué)習(xí)webpack嗎?

打包工具只是一向可以很好的管理html css javascript，使用可以錦上添花，不使用也沒關(guān)系。如果你是一位偏向于后端程序員，了解熟悉即可，對于前端程序員來說，現(xiàn)在打包工具基本是個基本技能，你需要多多擅用。

在這里介紹4款主流的打包工具：grunt gulp webpack rollup

Grunt：

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

Gulp：

用代碼方式來寫打包腳本，并且代碼采用流式的寫法，只抽象出了gulp.src gulp.pipegulp.dest gulp.watch接口，運用相當(dāng)簡單。更易于學(xué)習(xí)和使用，使用gulp的代碼量能，比grunt少一半左右。

Webpack:

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

Rollup：

tree-shaking生成更簡潔、更簡單的代碼。一般而言，對于應(yīng)用使用Webpack，對于類庫使用Rollup;需要代碼拆分(Code Splitting)，或者很多靜態(tài)資源需要處理，再或者構(gòu)建的項目需要引入很多CommonJS模塊的依賴時，使用webpack。代碼庫是基于ES6模塊，而且希望代碼能夠被其他人直接使用，使用Rollup。