Webpack 自定義插件

一，webpack背景知識

一款前端項目開發構建工具。或者用gulp。

主要功能有：提供順暢的先後端分離的開發環境，能夠配置解析不一樣的資源文件，統一打包和分包，按需加載資源文件，網站優化等等。

webpack的主要構成是：入口/出口，編譯包括loader和plugins，model，rules等開發環境配置，webpack自身提供不少插件，例如分析，壓縮，html等。

接觸前端有段時間的開發同窗應該基本瞭解如何寫一個loader，大概的流程比較簡單須要一些配置便可完成自定義loader，

自定義的plugins稍微有點邏輯，要了解一些webpack內部實現的源碼，

實現的邏輯有關係，好比引入方式、加載的時機、新的編譯等。

 

2，webpack 自定義插件的開發

2.1建立一個plugins，5步

1. 構建 一個函數
2. 在函數上 擴展 apply 方法
3. 指定綁定在webpack自身的事件鉤子
4. 處理webpack內部實例的特定數據
5. 功能完成後，調用webpack提供的回調

// 自定義事件的插件函數，也能夠寫成class的形式，可是內部apply方法不能用 箭頭函數。
function myPlugin () {

}
// 對 插件函數擴展 apply 方法
myPlugin.prototype.apply = function(compiler) {
    // webpack提供的編譯函數模板，監聽webpack的鉤子事件，而後會觸發 compilation，和插件執行完成的回調。
    compiler.plugin('webpacksEventHook', function(compilation,callback) {
        console.log('this is customer plugins');
        callback();
    });
}

 

2.2 webpack插件的鉤子函數

webpack在打包過程當中也有本身的生命週期函數，webpack吧這些過程也作了分類，因而就有了不少不一樣類型的插件。

其中有兩個重要的對象：compilation，compiler

compiler 包含webpack的全部配置信息（webpack.config.js），做爲 webpack 的實例在啓動時被初始化。

compilation 包含當前模塊，編譯文件，例如在開發環境，當文件發生變化，就會有一個新的 compilation 被建立。

如下內容就是一個webpack的自定義插件。

function MyPlugin(options) {
    this.options = options;
}
MyPlugin.prototype.apply = function(compiler) {
    
    console.log('開始執行插件')
    
    compiler.plugin('compile', function () {
        console.log('webpack 編譯器開始編譯...-----')
    })
    
    compiler.plugin('compilation', function (compilation) {
        console.log('編譯器開始一個新的編譯任務...-----')
        compilation.plugin('optimize', function () {
             console.log('編譯器開始優化文件...')
        })
    })
    compiler.plugin('done', function () {
        console.log('打包完成......')
    })
    
};
module.exports = MyPlugin;

 

舉例說明，經過emit鉤子獲取編譯後塊文件中，包含的路徑。webpack高版本api有變化不支持，使用webpack2.

compiler.plugin('emit', function (compilation, callback) {
  // compilation.chunks 存放全部代碼塊，是一個數組
  compilation.chunks.forEach(function (chunk) {
    // chunk 代碼塊
    // 代碼塊由模塊組成，讀取模塊
    chunk.forEachModule(function (module) {
      // module 模塊
      // module.fileDependencies 訪問當前模塊須要的依賴，便是文件路徑。
      module.fileDependencies.forEach(function (filepath) {
        console.log(filepath)
      })
    })
  })
  // emit 是異步事件，AsyncSeriesHook，異步事件都須要調用callback。有點像英語裏的及物動詞和不及物動詞
  callback();
})

 

2.3 多頁面webpack插件