Javascript五十問——從源頭細說Webpack與Gulp

lwx12525 發布于2019-08-23 14:47 / 734人閱讀

摘要：前言與是目前圈子內比較活躍的前端構建工具。對于初學者來說，對這二者往往容易認識不清，今天，就從事件的源頭，說清楚與。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。打包后形成的文件出口。

前言：Webpack 與 gulp是目前圈子內比較活躍的前端構建工具。網上有很多二者比較的文章，面試中也會經常遇到gulp，Webpack的區別這樣的問題。對于初學者來說，對這二者往往容易認識不清，今天，就從事件的源頭，說清楚Webpack與gulp。

Gulp

那是2014年，雖然JQuery風光多年，但是前端卻暗流涌動；MVVM剛剛提出不久，Angular快速成長，而React和Vue也剛剛開源不到一年，尚屬于冷門小語種。那個時候，前端工作者面臨的主要矛盾在于日益增長的業務復雜化的需求同落后低效率的前端部署。開發工作者為了發布一個網站，往往會重復的進行一些與開發無關的工作，手動完成這些工作會帶來很大的挫敗感。這個時候，自動化構建工具及應運而生，gulp就是在大浪淘沙中的勝利者。

Gulp是基于流的前端構建工具，nodejs的stream操作來讀取和操作數據；可以實現文件的轉換，壓縮，合并，監聽，自動部署等功能。gulp擁有強大的插件庫，基本上滿足開發需求，而且開發人員也可以根據自己的需求開發自定義插件。難得是，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配置文件，實現了scss文件到css文件的轉換；在終端輸入gulp sassStyle就能夠進行文件處理了。
對于gulp而言，會有一個task，這個task只會做一件事，比如將sass格式的文檔轉換成css文件；對于一個task而言，會有一個入口文件，即gulp.src，最會有一個目標文件，即gulp.dest；一入一出，可以將gulp理解為 一元函數，輸入一個x，根據funcion產出一個y。

Gulp簡單，快速，自動化的構建方案，收獲了很多開發者的喜愛。但是怎樣的機遇，讓webpack占據了前端工程化的半壁江山呢？

Webpack

解決方案永遠是緊跟需求的腳步的。隨著React與Vue份額越來越大，spa開發模式應用在越來越多的領域中，而ES6 Module語法的提出與大規模應用，模塊化開發方式越來越受人們的青睞。致使前端文件之間的依賴性越來越高，這時候就需要一個工具能夠解析這些依賴，并且將它們有條理的打包起來，優化請求，最好順便能夠解析成瀏覽器可以識別的語言——這正是webpack所承擔的工作;而很多開發者，也是從react或者vue的項目入手webpack的。

圖片來源于互聯網，侵刪

Webpack 是前端資源模塊化 管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分割，等到實際需要的時候再異步加載——來自Webpack官方網站。
所以Webpack只完成兩件事：按需加載，打包。

module.exports = {
  // 入口文件，是模塊構建的起點，同時每一個入口文件對應最后生成的一個 chunk。
  entry: {
    bundle: [
      "webpack/hot/dev-server",
      "webpack-dev-server/client?http://localhost:8080",
      path.resolve(__dirname, "app/app.js")
    ]
  },
  // 文件路徑指向(可加快打包過程)。
  resolve: {
    alias: {
      "react": pathToReact
    }
  },
  // 生成文件，是模塊構建的終點，包括輸出文件與輸出路徑。
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "[name].js"
  },
  // 這里配置了處理各模塊的 loader ，包括 css 預處理 loader ，es6 編譯 loader，圖片處理 loader。
  module: {
    loaders: [
      {
        test: /.js$/,
        loader: "babel",
        query: {
          presets: ["es2015", "react"]
        }
      }
    ],
    noParse: [pathToReact]
  },
  // webpack 各插件對象，在 webpack 的事件流中執行對應的方法。
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

上面是比較簡單的webpack配置文件 webpack.config.js,如果說gulp是一個一元函數，那么，webpack就是一個多元函數或者是加工廠；webpack從入口文件開始，遞歸找出所有依賴的代碼塊，再將代碼塊按照loader解析成新內容，而在webpack會在各個特定的時期廣播對應事件，插件會監聽這些事件，在某個事件中進行特定的操作。通俗一點來說，webpack本身來遞歸找到各個文件之間的依賴關系，在這個過程中，使用loaders對文件進行解析，最后，在各個不同的事件階段，插件可以對文件進行一個統一的處理。

webpack.config文件會包括以下幾部分：

1.entry:入口，webpack問此文件入手迭代。
2.output: 打包后形成的文件出口。
3.module: 模塊，在webpack中一個模塊對應一個文件。webpack會從entry開始，遞歸找出所有依賴的模塊
4.loaders:文件解析的各種轉換器
5.plugin:拓展插件

webpack的配置文件和構建方式比較復雜，這里不再贅述，感興趣的同學可以參考我列出來的參考文獻第三篇文章，或者可以關注我的專欄，后期我會出一篇關于webpack的學習筆記。

比較

所以，我們可以看出來，雖然Webpack與gulp都是前端工程化的管理工具，但是二者的側重點不同——gulp更加關注的是自動化的構建工具，你把代碼寫好了，gulp會幫你編譯、壓縮、解析。而Webpack關注的是在模塊化背景下的打包工作；它側重的還是如何將依賴的文件合理的組織起來，并且實現按需加載。

總結

總的來說，雖然webpack以打包起家，但是gulp能夠實現的功能，Webpack也能做；那么，是不是我們以后都要唯webpack馬首是瞻呢？非也，非也！webpack功能強大，但是它的缺點也來自于此；webpack并非一個輕量級的工具，學習曲線也非gulp那般平緩。曾經，gulp為了彌補js打包方面的不足，也有gulp-webpack插件的出現；但是webpack強大如斯，如果僅僅只是解析es6文件，未免有大馬拉小車之感。
根據我的項目實踐經驗，如果你要構建一個復雜的項目，項目使用vue或者react，模塊化引領，那么請選擇Webpack，Webpack天生模塊化，更加適合于SPA的應用場景，而gulp在SPA下明顯后力不足。如果你只是開發一個工具，請選擇gulp，至于js打包這種工作，有更加專一的rollup。畢竟，如果只是寫一個年會抽獎工具活躍氣氛，就不需要webpack火種送碳了。

總結下來：gulp與Webapck是各有所長，并不存在東風壓倒西風，而在前端工程化的大旗下，并非只有Webpack與gulp，我們還能看到rollup與browserify的一席之地。因此，在真正的工作中，還是要結合項目本身特點，切忌人云亦云。

參考文獻

1、JavaScript開發者的工具箱非常實用
2、Gulp官網
3、超級詳細的Webpack解讀—五星推薦
4、端構建工具之爭——Webpack vs Gulp 誰會被拍死在沙灘上—五星推薦

云服務器 GPU云服務器五十問從源頭 javascript從入門到精通 javascript從入門到精通下載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101140.html

JavaScript 五十問——認真聊一聊去抖與節流

摘要：前言無論是面試還是在討論瀏覽器優化過程中，都會涉及到去抖動和節流的問題?？偟膩碚f，這二者是一種限制事件觸發頻率的方式。不同的是，節流會指定事件觸發的時間間隔而去抖動會指定事件不觸發的時間間隔。前言無論是面試還是在討論瀏覽器優化過程中，都會涉及到去抖動和節流的問題。總的來說，這二者是一種限制事件觸發頻率的方式。不同的是，節流會指定事件觸發的時間間隔；而去抖動會指定事件不觸發的時間間隔...

chadLi 2019-08-02 14:05 評論0 收藏0
JavaScript 五十問——認真聊一聊去抖與節流

摘要：前言無論是面試還是在討論瀏覽器優化過程中，都會涉及到去抖動和節流的問題?？偟膩碚f，這二者是一種限制事件觸發頻率的方式。不同的是，節流會指定事件觸發的時間間隔而去抖動會指定事件不觸發的時間間隔。前言無論是面試還是在討論瀏覽器優化過程中，都會涉及到去抖動和節流的問題?？偟膩碚f，這二者是一種限制事件觸發頻率的方式。不同的是，節流會指定事件觸發的時間間隔；而去抖動會指定事件不觸發的時間間隔...

EscapedDog 2019-08-23 14:38 評論0 收藏0
Javascript 五十問——實現的繼承多種方式

摘要：組合繼承實現了屬性分離，方法共享下的完美繼承方案繼承我們的主角，，就是對組合繼承的改進。這也是為什么在子類構造函數中一定要顯示調用的原因。談到繼承，或者更廣義上的：一個對象可以使用另外一個對象的屬性或方法。實現起來無外乎有兩種方式：apply or call 改變this的作用域原型繼承改變__proto__指向，添加作用域鏈而JavaScript所有的繼承實現，都是圍繞以上兩點...

BlackHole1 2019-08-23 14:37 評論0 收藏0
JavaScript五十問——對比來說CSS的Grid與FlexBox（上篇）

摘要：前言春節假期有幸拜讀了張鑫旭大大的關于與的兩篇文章見參考文獻，很有收獲自己在開發的過程中，很多時候都會采用布局，而與這種方式已經很少使用了這次在春假期間學習了，深感的好用與便利。相對于，它多出來一個的屬性，代表拉伸默認屬性。前言春節假期有幸拜讀了張鑫旭大大的關于Flex與Grid的兩篇文章（見參考文獻），很有收獲；自己在開發的過程中，很多時候都會采用Flex布局，而Float與in...

xuhong 2019-08-30 15:55 評論0 收藏0
JavaScript 五十問——從源碼分析 ES6 Class 的實現機制

摘要：防止類的構造函數以普通函數的方式調用。這個函數的主要作用是通過給類添加方法，其中將靜態方法添加到構造函數上，將非靜態的方法添加到構造函數的原型對象上。 Class是ES6中新加入的繼承機制，實際是Javascript關于原型繼承機制的語法糖，本質上是對原型繼承的封裝。本文將會討論：1、ES6 class的實現細2、相關Object API盤點3、Javascript中的繼承實現方案盤點...

LeexMuller 2019-08-23 14:38 評論0 收藏0