在前兩天同學的面試中，有一位同學被問到 如何開發 webpack 的 loader 和 plugin？有沒有實際 loader 或者 plugin 的開發經驗。果然，面試只會越來越卷啊。

webpack 是大家所熟知的打包工具，里面包含了 5 個核心概念：

1. 入口：entry
2. 出口：output
3. 加載器：loader
4. 插件：plugin
5. 模式：mode

圖片

入口、出口、模式 的概念其實都比較好理解。但是一旦涉及到 loader 和 plugin，特別是實現 loader 和 plugin 很多小伙伴就比較懵了。

所以，今天咱們就拿出 10 分鐘的時間，一起來看那看那 loader 和 plugin 是如何實現的！

module、chunk、bundle

如果要講解 plugin 和 loader 那么會涉及到三個術語：module、chunk、bundle。

所以咱們就先說明下 module、chunk、bundle 然后再來看下 plugin 和 loader。

在打包工具中，有三個 “術語”：module、chunk、bundle：

1. module：模塊：通常一個模塊代表了一個文件。一般指的是 js 文件，當然也可以是 css 文件 或者 圖像文件。
2. chunk：塊：塊通常是在構建過程中由打包工具（如： Webpack）根據配置生成的，它們由一組相關的模塊放在一起打包組成。
3. bundle：打包文件：打包文件是指構建工具在打包過程中生成的最終輸出文件，可以在瀏覽器中加載并運行。

總的來說：模塊是組成項目的一個個文件，塊是由一組相關模塊組成的單元，而打包文件是構建工具最終生成的包含模塊和資源的輸出文件。

實現 loader 和 plguin

那么明確好了這三個基本的概念之后，接下來咱們來看下 loader 和 plugin：

loader 一般被稱為 加載器， webpack 默認只能處理 .js 的文件。如果項目中遇到其他類型的文件，那么就需要通過 loader 進行處理。

plugin 一般被叫做 插件，它可以為 構建工具（不只是 webpack，還包含 vite 或者 rollup） 提供一些附加的功能。比如說，咱們上一小節用到了 HtmlWebpackPlugin 它就是一個典型的插件，它可以在 webpack 構建的過程中生成一個新的 HTML 文件。并且自動生成新的 bundle 文件。

明確好了它們的基本概念之后，接下來咱們來看下它們 運行時機 的區別，咱們來看下面這張圖：

圖片

從圖中咱們可以看到：

1. loader 是在打包之前執行的，執行的時機比較固定。其實也很好理解嘛。loader 它實質就是一個轉換器，將 A 文件進行編譯形成 B 文件，操作的是文件，比如：將A.scss 轉變為B.css，單純的文件轉換過程。
2. 而 plugin 是在整個編譯的周期中都會起作用。webpack 在整個運行的生命周期中，會廣播出很多的事件，plugin 就可以監聽這些事件，然后在某一個時機下，改變輸出結果就可以了。

那么明確好了它們的一個運行機制之后，接下來咱們來實現一個簡單的 loader 和 plugin：

loader 的簡單實現

需求：

實現一個 loader 處理 txt 文件，把 hello world 轉化為 配置對象下 content 屬性的值

• 在 webpack-project/vue.config.js 中利用 chainWebpack 添加新的 loader：

// 添加一個處理 txt 文件的loader
config.module
// 創建一個新的規則，命名為 'custom-loader'
.rule('txt-loader')
// 適用于哪些文件
.test(/\.txt$/)
// 指定要使用的 loader 的名稱
.use('txt-loader')
// loader 的路徑
.loader('./src/loaders/textLoader')
// 配置對象
.options({
    content: '你好，世界'
})
.end()

• 然后創建 test.txt 文件：

hello world

• 實現 textLoader ：

const loaderUtils = require('loader-utils')
// 接收options配置
module.exports = function (source) {
// 獲取配置文件
const options = loaderUtils.getOptions(this)
// 把 hello world 替換成 content 屬性配置
source = source.replace(/hello world/, options.content)
// 最后需要返回一個可執行的代碼，所以需要 module.exports = '內容'
return `module.exports = '${source}'`
}

• 最后在 main.js 中導入該文件，并打印：

const text = require('./test.txt')
console.log(text)

plugin 的簡單實現

看完 loader 之后，接下來咱們來看一個 plugin 的構建。

需求：

在 webpack 打印完成之后，在終端輸出指定內容

• 創建 webpack-project/src/plugins/logPlugin.js 文件：

class LogPlugin {
// 通過構造函數，獲取到傳入的內容 content
constructor(options) {
    this.content = options.content
}

// Webpack 會調用 logPlugin 實例的 apply 方法給插件實例傳入 compiler 對象。compiler 表示編譯器的實例，它代表了完整的 webpack 環境配置
apply(compiler) {
    // 指定一個掛載到 webpack 自身的事件鉤子。done 會在 webpack 構建完成后回調
    compiler.hooks.done.tap('logPlugin', (compilation) => {
        // compilation: 當前打包構建流程的上下文
        console.log(this.content)
    })
}
}

module.exports = LogPlugin

• 在 vue.config.js 中，添加 plugin：

// 添加一個新的 plugin
// 添加一個新的插件
config
.plugin('LogPlugin')
.use(LogPlugin, [{ content: 'hello sunday' }])
.end()

此時，運行項目可在終端打印指定內容。

webpack 在官網中提供了 如何構建 loader 和 如何構建 plugin 的文檔，大家如果想要深入了解它們的構建方式的話，那么可以查詢下對應的文檔內容。