webpack--深入理解webpack的構建流程

概要

本質上，webpack 是一個用於現代 JavaScript 應用程序的 靜態模塊打包工具。當 webpack 處理應用程序時，它會在內部從一個或多個入口點構建一個 依賴圖(dependency graph)，然后將你項目中所需的每一個模塊組合成一個或多個 bundles，它們均為靜態資源，用於展示你的內容。

什么是webpack?

webpack 就像一條生產線,要經過一系列處理流程后才能將源文件轉換成輸出結果。 這條生產線上的每個處理流程的職責都是單一的,多個流程之間有存在依賴關系,只有完成當前處理后才能交給下一個流程去處理。 插件就像是一個插入到生產線中的一個功能,在特定的時機對生產線上的資源做處理。
webpack 通過 Tapable 來組織這條復雜的生產線。 webpack 在運行過程中會廣播事件,插件只需要監聽它所關心的事件,就能加入到這條生產線中,去改變生產線的運作。 webpack 的事件流機制保證了插件的有序性,使得整個系統擴展性很好。

配置文件以及涉及的核心概念

配置文件

配置文件默認下為webpack.config.js，也或者通過命令的形式指定配置文件，主要作用是用於激活webpack的加載項和插件
關於文件配置內容分析，如下注釋：

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

module.exports = {
  // 入口文件，是模塊構建的起點，同時每一個入口文件對應最后生成的一個 chunk。
  entry: './path/to/my/entry/file.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配置文件涉及的核心概念:
Entry
入口起點(entry point)指示 webpack 應該使用哪個模塊,來作為構建其內部依賴圖的開始。
進入入口起點后,webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。
每個依賴項隨即被處理,最后輸出到稱之為 bundles 的文件中。

Output
output 屬性告訴 webpack 在哪里輸出它所創建的 bundles,以及如何命名這些文件,默認值為 ./dist。
基本上,整個應用程序結構,都會被編譯到你指定的輸出路徑的文件夾中。

Module
模塊,在 Webpack 里一切皆模塊,一個模塊對應着一個文件。Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊。

Chunk
代碼塊,一個 Chunk 由多個模塊組合而成,用於代碼合並與分割，這些模塊是從入口模塊通過依賴分析得來的。

Loader
loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。
loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊,然后你就可以利用 webpack 的打包能力,對它們進行處理。
本質上,webpack loader 將所有類型的文件,轉換為應用程序的依賴圖（和最終的 bundle）可以直接引用的模塊。

Plugin
loader 被用於轉換某些類型的模塊,而插件則可以用於執行范圍更廣的任務。
插件的范圍包括,從打包優化和壓縮,一直到重新定義環境中的變量。插件接口功能極其強大,可以用來處理各種各樣的任務。

webpack構建流程

構建流程概要

webpack 的構建流程是一個串行的過程,從啟動到結束會依次執行以下步驟:

詳細構建流程

webpack 的運行流程是一個串行的過程，它的工作流程就是將各個插件串聯起來
在運行過程中會廣播事件，插件只需要監聽它所關心的事件，就能加入到這條webpack機制中，去改變webpack的運作，使得整個系統擴展性良好
從啟動到結束會依次執行以下三大步驟：

初始化流程
從配置文件和 Shell 語句中讀取與合並參數，得出最終的參數
配置文件默認下為webpack.config.js，也或者通過命令的形式指定配置文件，主要作用是用於激活webpack的加載項和插件
webpack 將 webpack.config.js 中的各個配置項拷貝到 options 對象中，並加載用戶配置的 plugins
完成上述步驟之后，則開始初始化Compiler編譯對象，該對象掌控者webpack聲明周期，不執行具體的任務，只是進行一些調度工作

class Compiler extends Tapable {
    constructor(context) {
        super();
        this.hooks = {
            beforeCompile: new AsyncSeriesHook(["params"]),
            compile: new SyncHook(["params"]),
            afterCompile: new AsyncSeriesHook(["compilation"]),
            make: new AsyncParallelHook(["compilation"]),
            entryOption: new SyncBailHook(["context", "entry"])
            // 定義了很多不同類型的鈎子
        };
        // ...
    }
}

function webpack(options) {
  var compiler = new Compiler();
  ...// 檢查options,若watch字段為true,則開啟watch線程
  return compiler;
}
...

Compiler 對象繼承自 Tapable，初始化時定義了很多鈎子函數

編譯構建流程
根據配置中的 entry 找出所有的入口文件

module.exports = {
  entry: './src/file.js'
}

初始化完成后會調用Compiler的run來真正啟動webpack編譯構建流程，主要流程如下：

compile 開始編譯
make 從入口點分析模塊及其依賴的模塊，創建這些模塊對象
build-module 構建模塊
seal 封裝構建結果
emit 把各個chunk輸出到結果文件
compile 編譯
執行了run方法后，首先會觸發compile，主要是構建一個Compilation對象

該對象是編譯階段的主要執行者，主要會依次下述流程：執行模塊創建、依賴收集、分塊、打包等主要任務的對象

make 編譯模塊
當完成了上述的compilation對象后，就開始從Entry入口文件開始讀取，主要執行_addModuleChain()函數，如下：

_addModuleChain(context, dependency, onModule, callback) {
   ...
   // 根據依賴查找對應的工廠函數
   const Dep = /** @type {DepConstructor} */ (dependency.constructor);
   const moduleFactory = this.dependencyFactories.get(Dep);
   
   // 調用工廠函數NormalModuleFactory的create來生成一個空的NormalModule對象
   moduleFactory.create({
       dependencies: [dependency]
       ...
   }, (err, module) => {
       ...
       const afterBuild = () => {
        this.processModuleDependencies(module, err => {
         if (err) return callback(err);
         callback(null, module);
           });
    };
       
       this.buildModule(module, false, null, null, err => {
           ...
           afterBuild();
       })
   })
}

過程如下：

_addModuleChain中接收參數dependency傳入的入口依賴，使用對應的工廠函數NormalModuleFactory.create方法生成一個空的module對象

回調中會把此module存入compilation.modules對象和dependencies.module對象中，由於是入口文件，也會存入compilation.entries中

隨后執行buildModule進入真正的構建模塊module內容的過程

build module 完成模塊編譯
這里主要調用配置的loaders，將我們的模塊轉成標准的JS模塊

在用Loader 對一個模塊轉換完后，使用 acorn 解析轉換后的內容，輸出對應的抽象語法樹（AST），以方便 Webpack后面對代碼的分析

從配置的入口模塊開始，分析其 AST，當遇到require等導入其它模塊語句時，便將其加入到依賴的模塊列表，同時對新找出的依賴模塊遞歸分析，最終搞清所有模塊的依賴關系

輸出流程
seal 輸出資源
seal方法主要是要生成chunks，對chunks進行一系列的優化操作，並生成要輸出的代碼

webpack 中的 chunk ，可以理解為配置在 entry 中的模塊，或者是動態引入的模塊

根據入口和模塊之間的依賴關系，組裝成一個個包含多個模塊的 Chunk，再把每個 Chunk 轉換成一個單獨的文件加入到輸出列表

emit 輸出完成
在確定好輸出內容后，根據配置確定輸出的路徑和文件名

output: {
    path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
}

在 Compiler 開始生成文件前，鈎子 emit 會被執行，這是我們修改最終文件的最后一次機會
這樣webpack整個打包過程就結束了

構建過程總結

下面用一個流程圖總結webpack的構建流程