webpack 基礎入門 - 瞭解webpack

亦惟發表於2019-03-27
Web

webpack 基礎入門 - 瞭解webpack

webpacck
webpack
在學習webpack之前先來了解一下什麼是webpack，為什麼要使用webpack，和其他的同型別軟體有什麼區別。

什麼是webpack？

webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。

根據官方的說明，通俗來講可以分為一下幾個方面

  1. 針對於 javascript 應用程式的
  2. 是一個靜態模組打包器
  3. 根據模組間的依賴關係，將這些模組打包成一個或者多個檔案。

常見的打包工具還有哪些，他們之間的區別是什麼？

通過介紹已經知道 webpack 工具的作用，webpack是構建工具中的一種，那麼相同型別的還有其他工具嗎，答案是肯定有的。那常見的構建工具有哪些，他們之間的區別是什麼呢？

  1. Grunt。是一個任務執行者，有大量現成的外掛封裝了常見的任務，也能管理任務之間的依賴關係，自動化地執行依賴的任務，每個任務的具體執行程式碼和依賴關係寫在配置檔案裡。優點：靈活，它只負責執行我們定義的任務；大量的可複用外掛封裝好了常見的構建任務。缺點是整合度不高，要寫很多配置後才可以用，無法做到開箱即用。
  2. Gulp。是一個基於流的自動化構建工具。除了可以管理和執行任務，還支援監聽檔案、讀寫檔案。優點是好用又不失靈活，既可以單獨完成構建，也可以和其他工具搭配使用。其缺點和Grunt類似，整合度不高，要寫很多配置後才可以用，無法做到開箱即用。
  3. Fis。是來自百度的開源構建工具。相對於Grunt、Gulp這些只提供了基本功能的工具，Fis內建了許多功能，無須做太多配置就能完成大量工作。
  4. Webpack。專注於構建模組化專案。專注於處理模組化的專案，能做到開箱即用、一步到位；可通過Plugin擴充套件，完整好用又不失靈活；使用場景不侷限於Web開發；社群龐大活躍，經常引入緊跟時代發展的新特性，能為大多數場景找到已有的開源擴充套件；良好的開發體驗。Webpack的缺點是隻能用於採用模組化開發的專案。

為什麼要使用 webpack?

前端技術發展之快，各種可以提高開發效率的新思想和框架層出不窮。但是它們都有一個共同點：原始碼無法直接執行，必須通過轉換後才可以正常執行。同時還有需要如下的處理：程式碼轉換、檔案優化、程式碼分割、模組合併、自動重新整理、程式碼校驗、自動釋出。構建其實是工程化、自動化思想在前端開發中的體現，將一系列流程用程式碼去實現，讓程式碼自動化地執行這一系列複雜的流程。構建為前端開發注入了更大的活力，解放了我們的生產力。

因為種種方面的原因，我們藉助於構建工具來解決複雜的問題同時提高工作效率。webpack 與其他構建工具我們已經做了對比，如果專案中更加的注重模組化的開發，那麼webpack就是不二的選擇。

webpack 版本

目前 webpack 已經更新到 v4.0 版本，相對於之前的版本也有所調整：

  1. 不再支援Node.js 4
  2. 支援多種模組型別
  3. 用mode屬性區分環境
  4. 零配置模組打包
  5. 更快的構建時間
  6. 全新的外掛系統
  7. 到webpack-cli的改變 該版本的更新做了更多的優化處理，同時也使得入門學習變得簡單。

webpack 安裝

準備條件：

webpack 是基於 node.js 開發的，所以其執行要保證是最新的 node.js 版本。如果版本過低則可能遇到各種問題。

本地安裝

執行webpack 4.0 版本需要同時安裝 webpack-cli 。對於多數專案還是建議使用本地安裝，一方面是保證每個專案都有獨立的webpack 配置方案，方便設定與修改，避免導致多個專案共同使用造成的環境配置衝突的問題。

安裝命令如下：

`npm install --save-dev webpack webpack-cli`
複製程式碼

全域性安裝

webpack 也提供了全域性安裝的方式

`npm install --global webpack`
複製程式碼

概念瞭解

在開始學習webpack 之前，有幾個核心的概念需要掌握。

  1. 入口(entry)

    入口起點(entry point)指示 webpack 應該使用哪個模組，來作為構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模組和庫是入口起點（直接和間接）依賴的。

  2. 出口[output]

    output 屬性告訴 webpack 在哪裡輸出它所建立的 bundles，以及如何命名這些檔案，預設值為 ./dist。基本上，整個應用程式結構，都會被編譯到你指定的輸出路徑的資料夾中。

  3. 依賴[loader]

    loader 讓 webpack 能夠去處理那些非 JavaScript 檔案（webpack 自身只理解 JavaScript）。loader 可以將所有型別的檔案轉換為 webpack 能夠處理的有效模組，然後你就可以利用 webpack 的打包能力，對它們進行處理。

  4. 外掛(plugins)

    loader 被用於轉換某些型別的模組，而外掛則可以用於執行範圍更廣的任務。外掛的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變數。外掛介面功能極其強大，可以用來處理各種各樣的任務。

  5. 模式(mode)

    通過選擇 development 或 production 之中的一個，來設定 mode 引數，你可以啟用相應模式下的 webpack 內建的優化

相關文章