免费A级毛片无码专区网站-成人国产精品视频一区二区-啊 日出水了 用力乖乖在线-国产黑色丝袜在线观看下-天天操美女夜夜操美女-日韩网站在线观看中文字幕-AV高清hd片XXX国产-亚洲av中文字字幕乱码综合-搬开女人下面使劲插视频

  1. 首頁(yè) > 生活 > >

【前端必會(huì)】不知道webpack插件? webpack插件源碼分析BannerPlugin

生活百科

背景

  1. 不知道webpack插件是怎么回事，除了官方的文檔外，還有一個(gè)很直觀的方式，就是看源碼 。
  2. 看源碼是一個(gè)挖寶的行動(dòng)，也是一次冒險(xiǎn)，我們可以找一些代碼量不是很大的源碼
  3. 比如webpack插件，我們就可以通過BannerPlugin源碼，來(lái)看下官方是如何實(shí)現(xiàn)一個(gè)插件的
  4. 希望對(duì)各位同學(xué)有所幫助，必要時(shí)可以通過源碼進(jìn)行一門技術(shù)的學(xué)習(xí)，加深理解
閑言少敘，直接上代碼https://github.com/webpack/webpack/blob/main/lib/BannerPlugin.js
配合文檔apihttps://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的hookcompilation.hooks.processAssets.tap({name: "BannerPlugin",//PROCESS_ASSETS_STAGE_ADDITIONS — 為現(xiàn)有的 asset 添加額外的內(nèi)容，例如 banner 或初始代碼 。stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,},() => {//遍歷當(dāng)前編譯對(duì)象的chunksfor (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 = https://www.huyubaike.com/biancheng/{chunk,filename: file,};//獲取插值路徑？https://webpack.docschina.org/api/compilation-object/#getpathconst comment = compilation.getPath(banner, data);//修改Asset，https://webpack.docschina.org/api/compilation-object/#updateassetcompilation.updateAsset(file, (old) => {//從緩存中獲取let cached = cache.get(old);//如果緩存不存在 或者緩存的comment 不等于當(dāng)前的commentif (!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;

經(jīng)驗(yàn)總結(jié)擴(kuò)展閱讀