一、webpack 的安裝和使用

1. webpack 簡介

webpack 是基于模塊化的打包 (構建)工具，它把一切視為模塊（包括 JS、CSS、圖片等資源文件）。

• 工作原理：

• • 以開發時態的入口模塊為起點
  • 遞歸分析所有依賴關系
  • 經過壓縮、合并等處理
  • 最終生成運行時態的文件
  • 如上圖 webpack 官方首頁圖片；左邊的代碼不運行，只運行右邊的代碼。左邊的代碼和右邊的功能是一樣的，只不過瀏覽器喜歡右邊的代碼。

2. webpack 的特點：

• • 工程化解決方案： webpack誕生于2012年，專注于解決前端工程化問題 ，尤其是瀏覽器端工程化遇到的問題(node 端也用 webpack 只不過用的少)，讓開發者專注業務代碼，把工程化過程中的問題(比如開發兼容性、執行效率等)交給 webpack 來處理。
  • 零配置使用：支持開箱即用，無需額外配置
  • 生態擴展性： 雖然核心功能有限，但通過擴展機制支持豐富的第三方插件，形成活躍的生態系統（目前生態活躍度遠超其他構建工具）。
  • node.js ：從入口文件開始要讀取文件，讀出來之后才能分析里邊用了 require/import 語句分析依賴關系，如果是在瀏覽器環境是讀取不了文件的。是圖片中間的過程需要 node 環境。
  • 基于模塊化：webpack 在構建過程中要分析依賴關系，方式是通過模塊化導入語句進行分析，它支持各模塊化標準，包括但不限于 CommonJS、ES6 Module。

3. webpack 的安裝

1) webpack 通過 npm 安裝

• webpack：核心包，webpack 核心包包含構建過程中所需的所有 API ，用于處理模塊依賴分析和打包過程。
• webpack-cli：提供命令行接口，通過調用 webpack 核心包的 api，來完成構建工程，開發者無需編寫構建代碼。
• 安裝方式：必須用過 npm 安裝，因為 webpack 運行在 Node.js 環境中。

2) 安裝方式

• 全局安裝與本地安裝

• • 全局安裝特點：

• • • 優點：可在任意目錄使用 webpack 命令
    • 缺點：所有項目強制使用相同版本，無法滿足不同項目的版本需求

• • 本地安裝優勢：

• • • 每個項目獨立管理 webpack 版本
    • 配合 npx 工具使用，無需全局安裝
    • 推薦使用本地安裝方式

• 本地安裝步驟

• • 

  • 初始化項目：

• • • 執行 npm init 創建 package.json 文件
    • 注意項目名稱需要符號 URL 規范（不含中文和特殊字符）

• • 安裝命令：

npm i -D webpack webpack-cli

為什么要加 -D 安裝開發依賴呢，是因為運行代碼時不需要 webpack ，從 webpack 首頁圖也能看出，webpack 是開發到運行的中間過程。

• • 驗證安裝：

• • • 檢查node_modules/.bin目錄下的可執行文件
    • 查看package.json中的devDependencies字段

說一下安裝開發依賴時如何選擇開發依賴，生產環境只需運行構建后的代碼，不再需要 webpack，構建過程屬于開發階段的工作。我們想要區分就看運行時是否需要該依賴即可。

依賴類型有開發依賴和生產依賴，開發依賴僅在開發階段需要的工具（如 webpack、測試工具等），而生產依賴是項目運行時必須的包（如 React、Vue 等）

3）使用

• webpack 的入口文件

webpack 要在開發時態分析依賴，那么就一定需要一個入口文件來分析，默認情況下，webpack 會以 ./src/index.js 作為入口文件分析依賴關系，打包到 ./dist/main.js 文件中（無論開發時有多少個模塊文件，最終都會合并成一個 main.js），必須要有 src/index.js 文件才能正常進行打包。

src 表示源代碼目錄（source），是開發階段代碼存放位置

dist 表示目標嗎目錄（destination），是運行時態代碼存放位置

從這張圖片可以看出，在開發時怎么簡便怎么來，不管是用 es 還是 common ，最終都會打包運行時轉換為普通的 js 函數，不會出現 commonjs 和 es6 模塊化。我們以后開發就可以集中精力開發 src ，dist 目錄不用管就行，我們只需把 src 寫好了運行一下 npx webpack 命令。

在之前寫的前端工程化包管理器文章中提到的腳本，在package.json文件中有一個scripts對象，用于定義可運行的腳本命令，這里我們可以定義一個腳本命令用于打包。

在 package.json 中配置 build 腳本執行 webpack ，通過 npm run build 命令觸發打包，開發時專注 src 目錄代碼，構建時運行打包命令生成 dist。

注意：為什么在腳本的值寫 webpack 而不是 npx webpack，是因為配置在 package.son 中的命令，它會自動查找 node_modules 中 .bin 中的 wepack 執行命令。

4. 構建結果的運行環境

webpack 運行警告信息解釋

• 

• 警告原因：webpack 打包時缺少 mode 參數配置，默認會使用 production 模式
• 環境區分：

• • 開發環境（development）：代碼未完成，用于測試調試階段
  • 生產環境（production）：代碼已完成，將部署到服務器運行

• 模式影響：

• • 開發環境：保留代碼格式和注釋，便于調試
  • 生產環境：進行代碼壓縮等優化，減小體積

• 配置方法：

• • 命令行方式：npx webpack --mode=development 或 --mode==production
  • npm 腳本配置：

    

• 重要概念：

• • 開發階段：

• • • 

    • 這是開發階段而不是開發環境，開發階段是編寫和修改代碼的過程

• • 運行環境：

• • • 

    • 打包后代碼實際執行的環境

• • 環境差異：生產環境會進行更多優化，開發環境保留調試信息

二、模塊化兼容性

由于 webpack 同時支持 CommonJS 和 ES6 module 模塊化標準，也就是說我們無論是用 Common 還是 ES6 寫的代碼它都能識別它們的依賴，并且進行打包。在這里產生了一個問題，如果說一個模塊，是用 ES6 導出，但用 CommonJS 導入，webpack 會怎么來處理呢？它導入的是什么？導出的又是什么？這個時候我們就需要理解在不同的模塊化標準里邊，它們互相操作的時候 webpack 是如何處理的。

1. 同模塊化標準

當導出和導入使用同一種模塊化標準時，webpack 的處理效果與原生模塊化完全一致。

2. 不同模塊化標準

• ES6 導出 + CommonJS 導入：

將 ES6 的基本導出和默認導出合并為一個對象，通過 require 直接獲取該對象

• CommonJS 導出 + ES6 導入：

將 module.exports 內容作為默認導出

3. 模塊化兼容性

選擇一個模塊化標準，避免混合使用不同模塊化標準

項目開發中統一使用 ES6 或 CommomJS 中的一種

• 第三方庫導入時：

• • 大部分庫使用 CommonJS 導出，可用 ES6 默認導入方式
  • 遇到 ES6 導出的庫時，注意默認導出在 default 屬性中