gulp 與 Webpack 的異曲同工之處

jackwang 發(fā)布于2019-08-22 11:15 / 2039人閱讀

摘要：所以我么的都會(huì)寫(xiě)到中當(dāng)然可以采用插件將文件抽離，我的文章有寫(xiě)到更側(cè)重于通過(guò)加載器的編譯轉(zhuǎn)換，可以將任何形式的文件都會(huì)打包成模塊例如模塊模塊圖片模塊媒體模塊等等。

gulp

我們可以認(rèn)為是前端開(kāi)發(fā)的生產(chǎn)線，gulp.task()則是每臺(tái)運(yùn)作的機(jī)器，

當(dāng)啟動(dòng)gulp的時(shí)候，電閘就會(huì)被合上，所有的機(jī)器開(kāi)始工作，

啟動(dòng)本地server ，編譯sass，編譯commenjs，多chrunk文件，打包壓縮，mock數(shù)據(jù)等，都各干各的，哪里來(lái)src就通過(guò)配置到哪里去dist

gulp 主要關(guān)注點(diǎn)是 track() 當(dāng)生產(chǎn)間沒(méi)有機(jī)器的運(yùn)作 很難將各個(gè)文件 加工成結(jié)果文件

webpack

webpack則不同 他更側(cè)重于 工程化，是模塊化的打包機(jī)，是對(duì)各種資源進(jìn)行模塊化，

他主要處理各種各個(gè)模塊的依賴(lài)文件，只要模塊間有依賴(lài) 都會(huì)進(jìn)行處理，不是該模塊的，就不會(huì)受影響

不同與gulp的路勁配置，會(huì)使得路徑下的各個(gè)文件都可能會(huì)受影響

webpack對(duì)各個(gè)模塊的管理 主要通過(guò)入口文件app.js建立依賴(lài)關(guān)系。

所以我么的js、css都會(huì)寫(xiě)到app.js中 當(dāng)然可以采用插件將css文件抽離，我的webpack文章有寫(xiě)到

webpack更側(cè)重于 loader 通過(guò)loader加載器的編譯 轉(zhuǎn)換 ，可以將任何形式的文件都會(huì)打包成模塊 例如：js模塊、css模塊、圖片模塊、媒體模塊等等。

綜上所述

gulp 和 webpack 都可以實(shí)現(xiàn) 文件的打包壓縮，啟動(dòng)服務(wù)，mock數(shù)據(jù)，編譯sass，編譯es6等，只是側(cè)重點(diǎn)不同而已，
但是 gulp可以引入webpack，引入gulp-webpack就可以，而webpack則對(duì)gulp再次封裝，引入了loader 將項(xiàng)目模塊化更徹底，二者相輔相成......


個(gè)人理解，如果有什么欠缺的會(huì)繼續(xù)補(bǔ)充.....

云服務(wù)器 GPU云服務(wù)器異曲同工不同之處 webpack的作用 webpack的cdn

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92031.html

相關(guān)文章

webpack 3 零基礎(chǔ)入門(mén)教程 #1 - 介紹

摘要：所以它在某些程度上，跟的功能有些相同。嚴(yán)格上講，模塊化不是他強(qiáng)調(diào)的東西，他旨在規(guī)范前端開(kāi)發(fā)流程。更是明顯強(qiáng)調(diào)模塊化開(kāi)發(fā)，而那些文件壓縮合并預(yù)處理等功能，不過(guò)是他附帶的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先來(lái)說(shuō)一下 webpack 是什么。 webpack 的...

張紅新 2019-08-21 17:55 評(píng)論0 收藏0
PostCSS自學(xué)筆記（一）【安裝使用篇】

摘要：而則可制定個(gè)人需求的一套解決方案僅安裝需要的插件。迫不及待的你已經(jīng)等不及安裝使用了吧。安裝及使用一般是結(jié)合自動(dòng)化工具使用，如果要單獨(dú)使用可以安裝，這里我先對(duì)的安裝使用講解下。接下來(lái)說(shuō)點(diǎn)實(shí)際的，如何利用結(jié)合自動(dòng)化工作在項(xiàng)目中使用。 PostCSS介紹 PostCSS是一個(gè)利用JS插件來(lái)對(duì)CSS進(jìn)行轉(zhuǎn)換的工具，這些插件非常強(qiáng)大，強(qiáng)大到無(wú)所不能。其中，Autoprefixer就是眾多Post...

jsummer 2019-08-29 13:17 評(píng)論0 收藏0
前端模塊化和構(gòu)建工具

摘要：以前一直對(duì)前端構(gòu)建工具的理解不深，經(jīng)過(guò)幾天的研究特意來(lái)總結(jié)一下，第一次寫(xiě)博客，有寫(xiě)錯(cuò)的請(qǐng)多多見(jiàn)諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請(qǐng)指出。強(qiáng)大的設(shè)計(jì)使得它更像是一個(gè)構(gòu)建平臺(tái)，而不只是一個(gè)打包工具。以前一直對(duì)前端構(gòu)建工具的理解不深，經(jīng)過(guò)幾天的研究特意來(lái)總結(jié)一下，第一次寫(xiě)博客，有寫(xiě)錯(cuò)的請(qǐng)多多見(jiàn)諒，該文章我也從其他博客拷了一些內(nèi)容，如果有冒犯之處，請(qǐng)指出。如今，網(wǎng)頁(yè)不再...

ad6623 2019-08-20 18:37 評(píng)論0 收藏0
基于 Gulp + Browserify 構(gòu)建 ES6 環(huán)境下的自動(dòng)化前端項(xiàng)目

摘要：本文特此給大家介紹下如何使用配合來(lái)構(gòu)建基于的前端項(xiàng)目。最后，在目錄下會(huì)生成最終的項(xiàng)目文件。執(zhí)行單元測(cè)試本例中使用進(jìn)行單元測(cè)試。隨著React、Angular2、Redux等前沿的前端框架越來(lái)越流行，使用webpack、gulp等工具構(gòu)建前端自動(dòng)化項(xiàng)目也隨之變得越來(lái)越重要。鑒于目前業(yè)界普遍更流行使用webpack來(lái)構(gòu)建es6(ECMAScript 2015)前端項(xiàng)目，網(wǎng)上的相關(guān)教程也比...

yuanxin 2019-08-19 18:05 評(píng)論0 收藏0
基于koajs的web項(xiàng)目構(gòu)建(二)

摘要：根據(jù)基于的項(xiàng)目構(gòu)建一所描述的，建立了項(xiàng)目的基本目錄結(jié)構(gòu)，接下來(lái)的工作便是編碼，編譯，測(cè)試，發(fā)布。對(duì)于自己，僅作文去嘗試清楚的闡述自己構(gòu)建項(xiàng)目的一些實(shí)踐。隨意的編碼風(fēng)格最終導(dǎo)致項(xiàng)目代碼的可維護(hù)性低，新加入成員學(xué)習(xí)成本提高。根據(jù) 基于koajs的web項(xiàng)目構(gòu)建（一）所描述的，建立了項(xiàng)目的基本目錄結(jié)構(gòu)，接下來(lái)的工作便是編碼，編譯，測(cè)試，發(fā)布。做為這些工作，每一項(xiàng)工作都有自己的學(xué)問(wèn)，針對(duì)這...

ZweiZhao 2019-08-20 10:49 評(píng)論0 收藏0