資訊專欄INFORMATION COLUMN
摘要：所以它在某些程度上，跟的功能有些相同。嚴(yán)格上講，模塊化不是他強(qiáng)調(diào)的東西，他旨在規(guī)范前端開發(fā)流程。更是明顯強(qiáng)調(diào)模塊化開發(fā)，而那些文件壓縮合并預(yù)處理等功能，不過是他附帶的功能。
1. webpack 是什么?
先來說一下 webpack 是什么。
webpack 的官方對它是這樣定義的：
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
中文的大概意思是說：
webpack 可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到 JavaScript 模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss，TypeScript 等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。
用大白話可以這樣說：
webpack是一個(gè)前端模塊化方案，更側(cè)重模塊打包，我們可以把開發(fā)中的所有資源（圖片、js 文件、css 文件等）都看成模塊，通過 loader（加載器）和 plugins（插件）對資源進(jìn)行處理，打包成符合生產(chǎn)環(huán)境部署的前端資源。
如果這樣還不明白的話，我們來說下前因后果。
在當(dāng)今的社會，作為 web 開發(fā)，會越來越意識到前端的重要性，隨著 HTML5、 CSS3、 ES6 各種技術(shù)的發(fā)展，前端的開發(fā)越來越寵大。甚至有些應(yīng)用就是單頁面應(yīng)用(SPA)，純 JavaScript 開發(fā)，JavaScript 文件的管理也是一個(gè)問題。JavaScript 模塊化編程，已經(jīng)成為一個(gè)迫切的需求，這就出現(xiàn)了 JavaScript 的模塊解決方案，以前是用 requirejs 或 seajs，而現(xiàn)在則是用 webpack。
舉個(gè)例子，很多人開發(fā)了各種優(yōu)秀的 JavaScript 模塊或組件，我們不想重復(fù)發(fā)明輪子，而是想直接利用別人的模塊，就是類似 require 或 include 這樣的機(jī)制，把別人的模塊引入進(jìn)來，但是 JavaScript 又沒有 類或包 這樣的概念，那應(yīng)該如何做呢？
如何去引入別人的模塊？引入之后保證各種依賴關(guān)系不出錯(cuò)？這就是 webpack 要解決的問題。
模塊化的概念我們理解了，那如何理解 打包 這個(gè)詞呢？
其實(shí)，模塊化的問題解決之后，webpack 就能把各種資源模塊打包合并成一個(gè)文件輸出給瀏覽器。在打包的過程中還能對這些資源進(jìn)行處理，比如壓縮減少體積，把 sass 編譯成 css, coffee 編譯成 js。所以它在某些程度上，跟 grunt/gulp 的功能有些相同。至于與 grunt/gulp 的不同之處，我們下面會講到。
2. 與 grunt/gulp 的區(qū)別grunt/gulp 的定義是 Task Runner。它有點(diǎn)像 ruby 的 Rake或 Thor，如果你不懂 ruby，那 c/cpp語言的 make，這應(yīng)該總知道吧。它是一種寫任務(wù)的工具，只是 grunt/gulp 是用 JavaScript 來寫 task 而已。
grunt/gulp 強(qiáng)調(diào)的是前端開發(fā)的工作流程，我們可以通過配置一系列的 task，定義 task 處理的事務(wù)（例如文件壓縮合并、雪碧圖、啟動 server、版本控制等），然后定義執(zhí)行順序，來讓 grunt/gulp 執(zhí)行這些 task，從而構(gòu)建項(xiàng)目的整個(gè)前端開發(fā)流程。
const gulp = require("gulp");
const babel = require("gulp-babel");
// gulp.src 會指定源文件，然后通過 pipe 函數(shù)把內(nèi)容傳給下個(gè)處理方法，最后 gulp.dest 是輸出處理后的文件內(nèi)容。
gulp.task("default", () =>
gulp.src("src/app.js")
.pipe(babel({
presets: ["es2015"]
}))
.pipe(gulp.dest("dist"))
);
打個(gè)比方，如果你的工程模塊依賴很簡單，不需要把 js 或各種資源打包，只需要簡單的合并、壓縮，那就不需要 webpack。grunt/gulp 就夠用了。反過來，如果你的工程龐大，頁面中使用了很多庫（SPA很容易出現(xiàn)這種情況），那就可以選擇使用 webpack，因?yàn)檫@樣既能做到模塊化管理，也能做到 grunt/gulp 的一些功能，比如壓縮，轉(zhuǎn)化 coffeescript 為 js 等。
gulp 也能和 webpack 結(jié)合起來用，gulp 里面有個(gè) webpack-stream 插件。就是讓 webpack 專門去做 module dependency 的事情, 生成一個(gè) bundle.js 文件，然后再用 gulp 去做一些其他雜七雜八 minify, uglify 的事情。 后來人們發(fā)現(xiàn) webpack 有個(gè) plugins 的選項(xiàng)， 可以用來進(jìn)一步處理經(jīng)過 loader 生成的 bundle.js，于是有人寫了對應(yīng)的插件， 所以 minify/uglify, 生成 hash 的工作也可以轉(zhuǎn)移到 webpack 本身了，擠掉了 gulp 這部分的市場份額。 再后來大家有發(fā)現(xiàn) npm/package.json 里面的 scripts 原來好好用啊，調(diào)用任務(wù)的時(shí)候就直接寫一個(gè)簡單的命令，因?yàn)?gulp 也不就是各種插件命令的組合呀，大部分情況下越來越不需要 gulp/grunt 之類的了。 所以你現(xiàn)在看到的很多新項(xiàng)目都是package.json 里面 scripts 寫了一堆，外部只需要一個(gè) webpack 就夠了。（摘自網(wǎng)絡(luò) https://segmentfault.com/q/10...）
最后總結(jié)一下：
雖然都是前端自動化構(gòu)建工具，但看他們的定位就知道不是對等的。
grunt/gulp 嚴(yán)格上講，模塊化不是他強(qiáng)調(diào)的東西，他旨在規(guī)范前端開發(fā)流程。
webpack 更是明顯強(qiáng)調(diào)模塊化開發(fā)，而那些文件壓縮合并、預(yù)處理等功能，不過是他附帶的功能。
3. Browserifywebpack 與其和 grunt/gulp 相比較，還不如跟 Browserify 比較，因?yàn)樗鼈儍烧吒嘟?，不過好像 Browserify 應(yīng)該被 webpack 代替了吧，我對 Browserify 了解也不多，在此就不細(xì)說了。
3. 優(yōu)勢webpack 不僅僅能處理 js, 也能處理 css, 也能處理 html，甚至是圖片等各種前端資源。
它開發(fā)便捷，僅僅使用一個(gè)配置文件，就能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉(zhuǎn) base64等。
擴(kuò)展性強(qiáng)，插件機(jī)制完善。
4. 為什么要學(xué)習(xí) webpack現(xiàn)在最流行的 react、vue、angular 等技術(shù)，你要學(xué)習(xí)和使用它們，難免會碰到 webpack，因?yàn)橐话愣紩?webpack 來構(gòu)建前端的開發(fā)環(huán)境，這樣，我們還有什么理由不學(xué)習(xí)呢？
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90203.html
摘要：延伸閱讀學(xué)習(xí)與實(shí)踐資料索引與前端工程化實(shí)踐前端每周清單半年盤點(diǎn)之篇前端每周清單半年盤點(diǎn)之與篇前端每周清單半年盤點(diǎn)之篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：frontshow），及時(shí)獲取前端每周清單；本文則是對于半年來發(fā)布的前端每周清單...
摘要：全文的目的是達(dá)成使用進(jìn)行項(xiàng)目開發(fā)，并且以我這個(gè)前端菜鳥所見所學(xué)來歸納整理。環(huán)境安裝與前期準(zhǔn)備我的基礎(chǔ)環(huán)境出的開源的編輯器命令行工具，下一個(gè)炒雞好用的神器。只提供組件，對配套技術(shù)不做限定，方便用戶與現(xiàn)有技術(shù)棧快速整合，降低使用成本。 全文的目的是達(dá)成使用amazeui-touch進(jìn)行項(xiàng)目開發(fā)，并且以我這個(gè)前端菜鳥所見所學(xué)來歸納整理。文章不對詳細(xì)內(nèi)容做講解。 環(huán)境安裝與前期準(zhǔn)備 我的基礎(chǔ)環(huán)...
摘要：全文的目的是達(dá)成使用進(jìn)行項(xiàng)目開發(fā)，并且以我這個(gè)前端菜鳥所見所學(xué)來歸納整理。環(huán)境安裝與前期準(zhǔn)備我的基礎(chǔ)環(huán)境出的開源的編輯器命令行工具，下一個(gè)炒雞好用的神器。只提供組件，對配套技術(shù)不做限定，方便用戶與現(xiàn)有技術(shù)?？焖僬希档褪褂贸杀?。 全文的目的是達(dá)成使用amazeui-touch進(jìn)行項(xiàng)目開發(fā)，并且以我這個(gè)前端菜鳥所見所學(xué)來歸納整理。文章不對詳細(xì)內(nèi)容做講解。 環(huán)境安裝與前期準(zhǔn)備 我的基礎(chǔ)環(huán)...
摘要：介紹背景最近和部門老大，一起在研究團(tuán)隊(duì)前端新手村的建設(shè)，目的在于幫助新人快速了解和融入公司團(tuán)隊(duì)，幫助零基礎(chǔ)新人學(xué)習(xí)和入門前端開發(fā)并且達(dá)到公司業(yè)務(wù)開發(fā)水平。 showImg(https://segmentfault.com/img/remote/1460000020063710?w=1300&h=646); 介紹 1. 背景 最近和部門老大，一起在研究團(tuán)隊(duì)【EFT - 前端新手村】的建設(shè)...
閱讀 2905·2021-11-17 09:33
閱讀 3686·2021-11-16 11:42
閱讀 3509·2021-10-26 09:50
閱讀 1363·2021-09-22 15:49
閱讀 3057·2021-08-10 09:44
閱讀 3698·2019-08-29 18:36
閱讀 3958·2019-08-29 16:43
閱讀 2236·2019-08-29 14:10
