資訊專欄INFORMATION COLUMN
摘要：前言與是目前圈子內(nèi)比較活躍的前端構(gòu)建工具。對于初學(xué)者來說，對這二者往往容易認(rèn)識不清，今天，就從事件的源頭，說清楚與。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。打包后形成的文件出口。
前言：Webpack 與 gulp是目前圈子內(nèi)比較活躍的前端構(gòu)建工具。網(wǎng)上有很多二者比較的文章，面試中也會經(jīng)常遇到gulp，Webpack的區(qū)別這樣的問題。對于初學(xué)者來說，對這二者往往容易認(rèn)識不清，今天，就從事件的源頭，說清楚Webpack與gulp。Gulp
那是2014年，雖然JQuery風(fēng)光多年，但是前端卻暗流涌動；MVVM剛剛提出不久，Angular快速成長，而React和Vue也剛剛開源不到一年，尚屬于冷門小語種。那個時候，前端工作者面臨的主要矛盾在于日益增長的業(yè)務(wù)復(fù)雜化的需求同落后低效率的前端部署。開發(fā)工作者為了發(fā)布一個網(wǎng)站，往往會重復(fù)的進(jìn)行一些與開發(fā)無關(guān)的工作，手動完成這些工作會帶來很大的挫敗感。這個時候，自動化構(gòu)建工具及應(yīng)運而生，gulp就是在大浪淘沙中的勝利者。
Gulp是基于流的前端構(gòu)建工具，nodejs的stream操作來讀取和操作數(shù)據(jù)；可以實現(xiàn)文件的轉(zhuǎn)換，壓縮，合并，監(jiān)聽，自動部署等功能。gulp擁有強大的插件庫，基本上滿足開發(fā)需求，而且開發(fā)人員也可以根據(jù)自己的需求開發(fā)自定義插件。難得是，gulp只有五個api，容易上手。
const gulp = require("gulp");
const sass = require("gulp-sass")
gulp.task("sassStyle",function() {
gulp.src("style/*.scss")
.pipe(sass())
.pipe(gulp.dest("style"))
})
上面就是一個基本的gulpfile配置文件，實現(xiàn)了scss文件到css文件的轉(zhuǎn)換；在終端輸入gulp sassStyle就能夠進(jìn)行文件處理了。
對于gulp而言，會有一個task，這個task只會做一件事，比如將sass格式的文檔轉(zhuǎn)換成css文件；對于一個task而言，會有一個入口文件，即gulp.src，最會有一個目標(biāo)文件，即gulp.dest；一入一出，可以將gulp理解為 一元函數(shù)，輸入一個x，根據(jù)funcion產(chǎn)出一個y。
Gulp簡單，快速，自動化的構(gòu)建方案，收獲了很多開發(fā)者的喜愛。但是怎樣的機遇，讓webpack占據(jù)了前端工程化的半壁江山呢？
Webpack解決方案永遠(yuǎn)是緊跟需求的腳步的。隨著React與Vue份額越來越大，spa開發(fā)模式應(yīng)用在越來越多的領(lǐng)域中，而ES6 Module語法的提出與大規(guī)模應(yīng)用，模塊化開發(fā)方式越來越受人們的青睞。致使前端文件之間的依賴性越來越高，這時候就需要一個工具能夠解析這些依賴，并且將它們有條理的打包起來，優(yōu)化請求，最好順便能夠解析成瀏覽器可以識別的語言——這正是webpack所承擔(dān)的工作;而很多開發(fā)者，也是從react或者vue的項目入手webpack的。
圖片來源于互聯(lián)網(wǎng)，侵刪
Webpack 是前端資源模塊化 管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分割，等到實際需要的時候再異步加載——來自Webpack官方網(wǎng)站。
所以Webpack只完成兩件事：按需加載，打包。
module.exports = {
// 入口文件，是模塊構(gòu)建的起點，同時每一個入口文件對應(yīng)最后生成的一個 chunk。
entry: {
bundle: [
"webpack/hot/dev-server",
"webpack-dev-server/client?http://localhost:8080",
path.resolve(__dirname, "app/app.js")
]
},
// 文件路徑指向(可加快打包過程)。
resolve: {
alias: {
"react": pathToReact
}
},
// 生成文件，是模塊構(gòu)建的終點，包括輸出文件與輸出路徑。
output: {
path: path.resolve(__dirname, "build"),
filename: "[name].js"
},
// 這里配置了處理各模塊的 loader ，包括 css 預(yù)處理 loader ，es6 編譯 loader，圖片處理 loader。
module: {
loaders: [
{
test: /.js$/,
loader: "babel",
query: {
presets: ["es2015", "react"]
}
}
],
noParse: [pathToReact]
},
// webpack 各插件對象，在 webpack 的事件流中執(zhí)行對應(yīng)的方法。
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
上面是比較簡單的webpack配置文件 webpack.config.js,如果說gulp是一個一元函數(shù)，那么，webpack就是一個多元函數(shù)或者是加工廠；webpack從入口文件開始，遞歸找出所有依賴的代碼塊，再將代碼塊按照loader解析成新內(nèi)容，而在webpack會在各個特定的時期廣播對應(yīng)事件，插件會監(jiān)聽這些事件，在某個事件中進(jìn)行特定的操作。通俗一點來說，webpack本身來遞歸找到各個文件之間的依賴關(guān)系，在這個過程中，使用loaders對文件進(jìn)行解析，最后，在各個不同的事件階段，插件可以對文件進(jìn)行一個統(tǒng)一的處理。
webpack.config文件會包括以下幾部分：
1.entry:入口，webpack問此文件入手迭代。
2.output: 打包后形成的文件出口。
3.module: 模塊，在webpack中一個模塊對應(yīng)一個文件。webpack會從entry開始，遞歸找出所有依賴的模塊
4.loaders:文件解析的各種轉(zhuǎn)換器
5.plugin:拓展插件
webpack的配置文件和構(gòu)建方式比較復(fù)雜，這里不再贅述，感興趣的同學(xué)可以參考我列出來的參考文獻(xiàn)第三篇文章，或者可以關(guān)注我的專欄，后期我會出一篇關(guān)于webpack的學(xué)習(xí)筆記。
比較所以，我們可以看出來，雖然Webpack與gulp都是前端工程化的管理工具，但是二者的側(cè)重點不同——gulp更加關(guān)注的是自動化的構(gòu)建工具，你把代碼寫好了，gulp會幫你編譯、壓縮、解析。而Webpack關(guān)注的是在模塊化背景下的打包工作；它側(cè)重的還是如何將依賴的文件合理的組織起來，并且實現(xiàn)按需加載。
總結(jié)總的來說，雖然webpack以打包起家，但是gulp能夠?qū)崿F(xiàn)的功能，Webpack也能做；那么，是不是我們以后都要唯webpack馬首是瞻呢？非也，非也！webpack功能強大，但是它的缺點也來自于此；webpack并非一個輕量級的工具，學(xué)習(xí)曲線也非gulp那般平緩。曾經(jīng)，gulp為了彌補js打包方面的不足，也有g(shù)ulp-webpack插件的出現(xiàn)；但是webpack強大如斯，如果僅僅只是解析es6文件，未免有大馬拉小車之感。
根據(jù)我的項目實踐經(jīng)驗，如果你要構(gòu)建一個復(fù)雜的項目，項目使用vue或者react，模塊化引領(lǐng)，那么請選擇Webpack，Webpack天生模塊化，更加適合于SPA的應(yīng)用場景，而gulp在SPA下明顯后力不足。如果你只是開發(fā)一個工具，請選擇gulp，至于js打包這種工作，有更加專一的rollup。畢竟，如果只是寫一個年會抽獎工具活躍氣氛，就不需要webpack火種送碳了。
總結(jié)下來：gulp與Webapck是各有所長，并不存在東風(fēng)壓倒西風(fēng)，而在前端工程化的大旗下，并非只有Webpack與gulp，我們還能看到rollup與browserify的一席之地。因此，在真正的工作中，還是要結(jié)合項目本身特點，切忌人云亦云。
參考文獻(xiàn)1、JavaScript開發(fā)者的工具箱 非常實用
2、Gulp官網(wǎng)
3、超級詳細(xì)的Webpack解讀—五星推薦
4、端構(gòu)建工具之爭——Webpack vs Gulp 誰會被拍死在沙灘上—五星推薦
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101140.html
摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題。總的來說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔而去抖動會指定事件不觸發(fā)的時間間隔。 前言 無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題。總的來說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔；而去抖動會指定事件不觸發(fā)的時間間隔...
摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔而去抖動會指定事件不觸發(fā)的時間間隔。 前言 無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題。總的來說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔；而去抖動會指定事件不觸發(fā)的時間間隔...
摘要：組合繼承實現(xiàn)了屬性分離，方法共享下的完美繼承方案繼承我們的主角，，就是對組合繼承的改進(jìn)。這也是為什么在子類構(gòu)造函數(shù)中一定要顯示調(diào)用的原因。 談到繼承，或者更廣義上的：一個對象可以使用另外一個對象的屬性或方法。實現(xiàn)起來無外乎有兩種方式：apply or call 改變this的作用域原型繼承 改變__proto__指向，添加作用域鏈 而JavaScript所有的繼承實現(xiàn)，都是圍繞以上兩點...
摘要：前言春節(jié)假期有幸拜讀了張鑫旭大大的關(guān)于與的兩篇文章見參考文獻(xiàn)，很有收獲自己在開發(fā)的過程中，很多時候都會采用布局，而與這種方式已經(jīng)很少使用了這次在春假期間學(xué)習(xí)了，深感的好用與便利。相對于，它多出來一個的屬性，代表拉伸默認(rèn)屬性。 前言 春節(jié)假期有幸拜讀了張鑫旭大大的關(guān)于Flex與Grid的兩篇文章（見參考文獻(xiàn)），很有收獲；自己在開發(fā)的過程中，很多時候都會采用Flex布局，而Float與in...
摘要：防止類的構(gòu)造函數(shù)以普通函數(shù)的方式調(diào)用。這個函數(shù)的主要作用是通過給類添加方法，其中將靜態(tài)方法添加到構(gòu)造函數(shù)上，將非靜態(tài)的方法添加到構(gòu)造函數(shù)的原型對象上。 Class是ES6中新加入的繼承機制，實際是Javascript關(guān)于原型繼承機制的語法糖，本質(zhì)上是對原型繼承的封裝。本文將會討論：1、ES6 class的實現(xiàn)細(xì)2、相關(guān)Object API盤點3、Javascript中的繼承實現(xiàn)方案盤點...
閱讀 1969·2021-11-22 15:29
閱讀 3271·2021-10-14 09:43
閱讀 1236·2021-10-08 10:22
閱讀 3357·2021-08-30 09:46
閱讀 1442·2019-08-30 15:55
閱讀 1938·2019-08-30 15:44
閱讀 861·2019-08-30 14:19
閱讀 1458·2019-08-30 13:13
