背景

1. 不知道webpack插件是怎么回事，除了官方的文檔外，還有一個(gè)很直觀的方式，就是看源碼。
2. 看源碼是一個(gè)挖寶的行動(dòng)，也是一次冒險(xiǎn)，我們可以找一些代碼量不是很大的源碼
3. 比如webpack插件，我們就可以通過BannerPlugin源碼，來看下官方是如何實(shí)現(xiàn)一個(gè)插件的
4. 希望對(duì)各位同學(xué)有所幫助，必要時(shí)可以通過源碼進(jìn)行一門技術(shù)的學(xué)習(xí)，加深理解

閑言少敘，直接上代碼

https://github.com/webpack/webpack/blob/main/lib/BannerPlugin.js

創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)龍馬潭,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

配合文檔api
https://webpack.docschina.org/api/compilation-object/#updateasset

代碼分析已添加中文注釋

/*
	MIT License http://www.opensource.org/licenses/mit-license.php
	Author Tobias Koppers @sokra
*/

"use strict";

const { ConcatSource } = require("webpack-sources");
const Compilation = require("./Compilation");
const ModuleFilenameHelpers = require("./ModuleFilenameHelpers");
const Template = require("./Template");
const createSchemaValidation = require("./util/create-schema-validation");

/** @typedef {import("../declarations/plugins/BannerPlugin").BannerPluginArgument} BannerPluginArgument */
/** @typedef {import("../declarations/plugins/BannerPlugin").BannerPluginOptions} BannerPluginOptions */
/** @typedef {import("./Compiler")} Compiler */

// 創(chuàng)建一個(gè)驗(yàn)證
const validate = createSchemaValidation(
  require("../schemas/plugins/BannerPlugin.check.js"),
  () => require("../schemas/plugins/BannerPlugin.json"),
  {
    name: "Banner Plugin",
    baseDataPath: "options",
  }
);

//包裝Banner文字
const wrapComment = (str) => {
  if (!str.includes("\n")) {
    return Template.toComment(str);
  }
  return `/*!\n * ${str
    .replace(/\*\//g, "* /")
    .split("\n")
    .join("\n * ")
    .replace(/\s+\n/g, "\n")
    .trimRight()}\n */`;
};

//插件類
class BannerPlugin {
  /**
   * @param {BannerPluginArgument} options options object
   * 初始化插件配置
   */
  constructor(options) {
    if (typeof options === "string" || typeof options === "function") {
      options = {
        banner: options,
      };
    }

    validate(options);

    this.options = options;

    const bannerOption = options.banner;
    if (typeof bannerOption === "function") {
      const getBanner = bannerOption;
      this.banner = this.options.raw
        ? getBanner
        : (data) => wrapComment(getBanner(data));
    } else {
      const banner = this.options.raw
        ? bannerOption
        : wrapComment(bannerOption);
      this.banner = () => banner;
    }
  }

  /**
   * Apply the plugin
   * @param {Compiler} compiler the compiler instance
   * @returns {void}
   * 插件主方法
   */
  apply(compiler) {
    const options = this.options;
    const banner = this.banner;
    const matchObject = ModuleFilenameHelpers.matchObject.bind(
      undefined,
      options
    );
    //創(chuàng)建一個(gè)Map，處理如果添加過的文件，不在添加
    const cache = new WeakMap();

    compiler.hooks.compilation.tap("BannerPlugin", (compilation) => {
      //處理Assets的hook
      compilation.hooks.processAssets.tap(
        {
          name: "BannerPlugin",
          //PROCESS_ASSETS_STAGE_ADDITIONS — 為現(xiàn)有的 asset 添加額外的內(nèi)容，例如 banner 或初始代碼。
          stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
        },
        () => {
          //遍歷當(dāng)前編譯對(duì)象的chunks
          for (const chunk of compilation.chunks) {
            //如果配置標(biāo)識(shí)只處理入口，但是當(dāng)前chunk不是入口，直接進(jìn)入下一次循環(huán)
            if (options.entryOnly && !chunk.canBeInitial()) {
              continue;
            }
            //否則，遍歷chunk下的文件
            for (const file of chunk.files) {
              //根據(jù)配置匹配文件是否滿足要求，如果不滿足，直接進(jìn)入下一次循環(huán)，處理下一個(gè)文件
              if (!matchObject(file)) {
                continue;
              }

              //否則，
              const data = {
                chunk,
                filename: file,
              };

              //獲取插值路徑？https://webpack.docschina.org/api/compilation-object/#getpath
              const comment = compilation.getPath(banner, data);

              //修改Asset，https://webpack.docschina.org/api/compilation-object/#updateasset
              compilation.updateAsset(file, (old) => {
                //從緩存中獲取
                let cached = cache.get(old);
                //如果緩存不存在 或者緩存的comment 不等于當(dāng)前的comment
                if (!cached || cached.comment !== comment) {
                  //源文件追加到頭部或者尾部
                  const source = options.footer
                    ? new ConcatSource(old, "\n", comment)
                    : new ConcatSource(comment, "\n", old);
                  //創(chuàng)建對(duì)象加到緩存
                  cache.set(old, { source, comment });

                  //返回修改后的源
                  return source;
                }
                //返回緩存中的源
                return cached.source;
              });
            }
          }
        }
      );
    });
  }
}

module.exports = BannerPlugin;

總結(jié)

1. 查看源碼，查看源碼，查看源碼
2. WeakMap可以深入了解下，應(yīng)該是避免對(duì)象不釋放導(dǎo)致內(nèi)存問題。
3. 插件里用到的很多工具方法可以繼續(xù)深入，一遍自己開發(fā)插件時(shí)可以參考