80行代碼教你寫一個Webpack插件並發布到npm

1. 前言

最近在學習 Webpack 相關的原理，以前只知道 Webpack 的配置方法，但並不知道其內部流程，經過一輪的學習，感覺獲益良多，為了鞏固學習的內容，我決定嘗試自己動手寫一個插件。

這個插件實現的功能比較簡單：

• 默認清除 js 代碼中的 console.log 的打印輸出；
• 可通過傳入配置，實現移除 console 的其它方法，如 console.warn、console.error 等；

2. Webpack 的構建流程以及 plugin 的原理

2.1 Webpack 構建流程

Webpack 的主要構建流程，可以分為三個階段:

• 初始化階段：啟動構建，讀取與合並配置參數，加載 Plugin，實例化 Compiler。
• 編譯階段：從 Entry 發出，針對每個 Module 串行調用對應的 Loader 去翻譯文件內容，再找到該 Module 依賴的 Module，遞歸地進行編譯處理。
• 生成階段：對編譯后的 Module 組合成 Chunk，把 Chunk 轉換成文件，輸出到文件系統。

如果 Webpack 打包生產環境文件時，只會執行一次構建，以上階段會按順序執行一遍。但是在開啟監聽模式時，如開發環境，Webpack 會持續的進行構建。

2.2 plugin 原理

Webpack 插件通常是一個帶有 apply 函數的類，其中 constructor 可以接收傳入的配置項。插件被安裝時，apply 函數會被調用一次，並接收 Compiler 對象，然后我們可以在 Compiler 對象上監聽不同的事件鈎子，從而進行插件功能的開發。

// 定義一個插件
class MyPlugin {
  // 構造函數，接收插件的配置項 options 
  constructor(options) {
    // 獲取配置項，初始化插件
  }

  // 插件安裝時會調用 apply，並傳入 compiler
  apply(compiler) {
    // 獲取 comolier 獨享，可以監聽事件鈎子
    // 功能開發 ... 
  }
}

2.3 compiler 和 compilation 對象

在開發 Plugin 過程中最常用的兩個對象就是 Compiler 和 Compilation：

• Compiler 對象在 Webpack 啟動時被實例化，該對象包含了 Webpack 環境所有的配置信息，包括 options、loaders、plugins 等。在整個 Webpack 構建過程中，Compiler 對象是全局唯一的， 它提供了很多事件鈎子回調供插件使用。
• Compilation 對象包含了當前的模塊資源、編譯生成資源、變化的文件等。Compilation 對象在 Webpack 構建過程中並不是唯一的，如果在開發模式下 Webpack 開啟了文件檢測功能，每當文件變化時，Webpack 會重新構建，此時會生成一個新的 Compilation 對象。Compilation 對象也提供了很多事件回調供插件做擴展。

3. 插件開發

3.1 項目目錄

該插件實現的功能比較簡單，文件目錄也不復雜。首先新建一個空文件夾 remove-console-Webpack-plugin，並在該文件夾目錄下運行 npm init，根據提示來填寫 package.json 相關信息。然后再新建一個 src 文件夾，插件主要代碼就放在 src/index.js 里面。如果你需要把項目放到 github 上，最好也添加一下 .gitignore、README.md 等文件。

// remove-console-Webpack-plugin
├─src
│  └─index.js  
├─.gitignore
├─package.json
└─README.md 

3.2 插件代碼

插件代碼邏輯也並不復雜，主要有幾點：

1. 在構造函數中接收配置參數，並對參數進行合並，得到需要清除的 console 函數, 存放在 removed 數組中；
2. 在 apply 函數中監聽 compiler.hook.compilation 鈎子，該鈎子觸發后，拿到 compilation 后進一步監聽它的鈎子，這里 Webpack4 和 Webpack5 的鈎子不一樣，需要做兼容；
3. 定義 assetsHandler 方法來處理 js 文件，利用正則表達式清除 removed 中包括的 console 函數；

class RemoveConsoleWebpackPlugin {
  // 構造函數接受配置參數
  constructor(options) {
    let include = options && options.include;
    let removed = ['log']; // 默認清除的方法

    if (include) {
      if (!Array.isArray(include)) {
        console.error('options.include must be an Array.');
      } else if (include.includes('*')) {
        // 傳入 * 表示清除所有 console 的方法
        removed = Object.keys(console).filter(fn => {
          return typeof console[fn] === 'function';
        })
      } else {
        removed = include; // 根據傳入配置覆蓋
      }
    }

    this.removed = removed;
  }

  // Webpack 會調用插件實例的 apply 方法，並傳入compiler 對象
  apply(compiler) {
    // js 資源代碼處理函數
    let assetsHandler = (assets, compilation) => {
      let removedStr = this.removed.reduce((a, b) => (a + '|' + b));

      let reDict = {
        1: [RegExp(`\\.console\\.(${removedStr})\\(\\)`, 'g'), ''],
        2: [RegExp(`\\.console\\.(${removedStr})\\(`, 'g'), ';('],
        3: [RegExp(`console\\.(${removedStr})\\(\\)`, 'g'), ''],
        4: [RegExp(`console\\.(${removedStr})\\(`, 'g'), '(']
      }

      Object.entries(assets).forEach(([filename, source]) => {
        // 匹配js文件
        if (/\.js$/.test(filename)) {
          // 處理前文件內容
          let outputContent = source.source();

          Object.keys(reDict).forEach(i => {
            let [re, s] = reDict[i];
            outputContent = outputContent.replace(re, s);
          })

          compilation.assets[filename] = {
            // 返回文件內容
            source: () => {
              return outputContent
            },
            // 返回文件大小
            size: () => {
              return Buffer.byteLength(outputContent, 'utf8')
            }
          }
        }
      })
    }

    /**
     * 通過 compiler.hooks.compilation.tap 監聽事件
     * 在回調方法中獲取到 compilation 對象
     */
    compiler.hooks.compilation.tap('RemoveConsoleWebpackPlugin',
      compilation => {
        // Webpack 5
        if (compilation.hooks.processAssets) {
          compilation.hooks.processAssets.tap(
            { name: 'RemoveConsoleWebpackPlugin' },
            assets => assetsHandler(assets, compilation)
          );
        } else if (compilation.hooks.optimizeAssets) {
          // Webpack 4
          compilation.hooks.optimizeAssets.tap(
            'RemoveConsoleWebpackPlugin', 
            assets => assetsHandler(assets, compilation)
          );
        }
      })
  }
}

// export Plugin
module.exports = RemoveConsoleWebpackPlugin;

4. 發布到npm

希望別人能使用到你的插件，就需要把插件發布到 npm 上，發布的主要流程：

1. 首先在 npm 官網上注冊賬號，然后打開命令行工具，在任意目錄下輸入 npm login 並按提示登錄；
   

2. 登錄后可用 npm whoami 查看是否登錄成功；
   

3. 發布前檢查一下根目錄下的 package.json 文件信息是否填寫正確，主要字段：
   name：決定用戶下載你的插件時用的名稱，不可與 npm 上已有的第三方包重名，否則無法發布；
   main：插件主文件入口，Webpack 引入插件時，就從該目錄導入；
   version：每次更新發布時，需要與上一版本的版本號不一樣，否則上傳不成功；
   repository：如果你的插件代碼放在 github、gitee 等網站，可以填一下；
   private：不能設置為 true，否則無法發布；
   

4. 一切准備就緒后，切換到插件所在的目錄下，運行 npm publish 即可上傳插件；
   

5. 上傳成功后，到 npm 官網上搜索，看看是否能搜到插件；
   

5. 結尾

本文是我學習了 Webpack 原理並開發了一個小插件后的總結，由於 Webpack 的內容實在太多了，所以可能會有理解不到位的地方，還請大佬們多多指正。另外，如果這篇文章對你有幫助，可以給我點個贊，或者給我的插件項目點個star，你的鼓勵是我最大的動力哈~