style-loader

module.exports = function (content) {
      /*
        1. 直接使用style-loader，只能处理样式
          不能处理样式中引入的其他资源
          use: ["./loaders/style-loader"],
        2. 借助css-loader解决样式中引入的其他资源的问题
          use: ["./loaders/style-loader", "css-loader"],
          问题是css-loader暴露了一段js代码，style-loader需要执行js代码，得到返回值，再动态创建style标签，插入到页面上
          不好操作
        3. style-loader使用pitch loader用法
      */
      // const script = `
      //   const styleEl = document.createElement('style');
      //   styleEl.innerHTML = ${JSON.stringify(content)};
      //   document.head.appendChild(styleEl);
      // `;
      // return script;
    };
    module.exports.pitch = function (remainingRequest) {
      // remainingRequest 剩下还需要处理的loader
      // console.log(remainingRequest); // C:\Users\86176\Desktop\webpack\source\node_modules\css-loader\dist\cjs.js!C:\Users\86176\Desktop\webpack\source\src\css\index.css
      // 1. 将 remainingRequest 中绝对路径改成相对路径（因为后面只能使用相对路径操作）
      const relativePath = remainingRequest
        .split("!")
        .map((absolutePath) => {
          // 返回相对路径
          return this.utils.contextify(this.context, absolutePath);
        })
        .join("!");
      // console.log(relativePath); // ../../node_modules/css-loader/dist/cjs.js!./index.css
      // 2. 引入css-loader处理后的资源
      // 3. 创建style，将内容插入页面中生效
      const script = `
        import style from "!!${relativePath}";
        const styleEl = document.createElement('style');
        styleEl.innerHTML = style;
        document.head.appendChild(styleEl);
      `;
      // 中止后面loader执行
      return script;
    };

plugin原理

Plugin 的作用

通过插件我们可以扩展 webpack，加入自定义的构建行为，使 webpack 可以执行更广泛的任务，拥有更强的构建能力。

Plugin 工作原理

webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。

插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。 webpack 的事件流机制保证了插件的有序性，使得整个系统扩展性很好。

站在代码逻辑的角度就是：webpack 在编译代码过程中，会触发一系列 Tapable 钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。

webpack内部钩子

钩子的本质就是：事件。为了方便我们直接介入和控制编译过程，webpack 把编译过程中触发的各类关键事件封装成事件接口暴露了出来。这些接口被很形象地称做：hooks（钩子）。

Tapable

Tapable 为 webpack 提供了统一的插件接口（钩子）类型定义，它是 webpack 的核心功能库。webpack 中目前有十种 hooks，在 Tapable 源码中可以看到，他们是：

// https://github.com/webpack/tapable/blob/master/lib/index.js
    exports.SyncHook = require("./SyncHook");
    exports.SyncBailHook = require("./SyncBailHook");
    exports.SyncWaterfallHook = require("./SyncWaterfallHook");
    exports.SyncLoopHook = require("./SyncLoopHook");
    exports.AsyncParallelHook = require("./AsyncParallelHook");
    exports.AsyncParallelBailHook = require("./AsyncParallelBailHook");
    exports.AsyncSeriesHook = require("./AsyncSeriesHook");
    exports.AsyncSeriesBailHook = require("./AsyncSeriesBailHook");
    exports.AsyncSeriesLoopHook = require("./AsyncSeriesLoopHook");
    exports.AsyncSeriesWaterfallHook = require("./AsyncSeriesWaterfallHook");
    exports.HookMap = require("./HookMap");
    exports.MultiHook = require("./MultiHook");

Tapable 还统一暴露了三个方法给插件，用于注入不同类型的自定义构建行为：

tap：可以注册同步钩子和异步钩子。

tapAsync：回调方式注册异步钩子。

tapPromise：Promise 方式注册异步钩子。

Plugin 构建对象

Compiler

compiler 对象中保存着完整的 Webpack 环境配置，每次启动 webpack 构建时它都是一个独一无二，仅仅会创建一次的对象。

这个对象会在首次启动 Webpack 时创建，我们可以通过 compiler 对象上访问到 Webapck 的主环境配置，比如 loader 、 plugin 等等配置信息。

它有以下主要属性：

compiler.options 可以访问本次启动 webpack 时候所有的配置文件，包括但不限于 loaders 、 entry 、 output 、 plugin 等等完整配置信息。

compiler.inputFileSystem 和 compiler.outputFileSystem 可以进行文件操作，相当于 Nodejs 中 fs。

compiler.hooks 可以注册 tapable 的不同种类 Hook，从而可以在 compiler 生命周期中植入不同的逻辑。compiler hooks 文档

Compilation

compilation 对象代表一次资源的构建，compilation 实例能够访问所有的模块和它们的依赖。

一个 compilation 对象会对构建依赖图中所有模块，进行编译。在编译阶段，模块会被加载(load)、封存(seal)、优化(optimize)、分块(chunk)、哈希(hash)和重新创建(restore)。

它有以下主要属性：

compilation.modules 可以访问所有模块，打包的每一个文件都是一个模块。

compilation.chunks chunk 即是多个 modules 组成而来的一个代码块。入口文件引入的资源组成一个 chunk，通过代码分割的模块又是另外的 chunk。

compilation.assets 可以访问本次打包生成所有文件的结果。

compilation.hooks 可以注册 tapable 的不同种类 Hook，用于在 compilation 编译模块阶段进行逻辑添加以及修改。compilation hooks 文档

生命周期简图

网络异常，图片无法展示

编写插件

/*
      1. webpack加载webpack.config.js中所有配置，此时就会new TestPlugin(), 执行插件的constructor
      2. webpack创建compiler对象
      3. 遍历所有plugins中插件，调用插件的apply方法
      4. 执行剩下编译流程（触发各个hooks事件）
    */
    class TestPlugin {
      constructor() {
        console.log("TestPlugin constructor");
      }
      apply(compiler) {
       console.log("TestPlugin apply");
      }
    }
    module.exports = TestPlugin;

然后我们可以在apply中编写hooks。

一些plugin的练习

BannerWebpackPlugin

作用：给打包输出文件添加注释。

开发思路:

需要打包输出前添加注释：需要使用 compiler.hooks.emit 钩子, 它是打包输出前触发。

如何获取打包输出的资源？compilation.assets 可以获取所有即将输出的资源文件。

网络异常，图片无法展示

plugin的实现

class BannerWebpackPlugin {
      // 插件中传递的配置会放在构造函数中作为参数
      constructor(options = {}) {
        this.options = options;
      }
      apply(compiler) {
        // 在资源输出之前触发
        compiler.hooks.emit.tap("BannerWebpackPlugin", (compilation) => {
          // debugger;
          const extensions = ["css", "js"];
          // 1. 获取即将输出的资源文件：compilation.assets
          // 2. 过滤只保留js和css资源
          const assets = Object.keys(compilation.assets).filter((assetPath) => {
            // 将文件名切割 ['xxxx', 'js'] ['xxxx', 'css']
            const splitted = assetPath.split(".");
            // 获取最后一个文件扩展名
            const extension = splitted[splitted.length - 1];
            // 判断是否保护
            return extensions.includes(extension);
          });
          const prefix = `/*
            * Author: ${this.options.author}
            */
            `;
          // 3. 遍历剩下资源添加上注释
          // console.log(assets);
          assets.forEach((asset) => {
            // 获取原来内容
            const source = compilation.assets[asset].source();
            // 拼接上注释
            const content = prefix + source;
            // 修改资源
            compilation.assets[asset] = {
              // 最终资源输出时，调用source方法，source方法的返回值就是资源的具体内容
              source() {
                return content;
              },
              // 资源大小
              size() {
                return content.length;
              },
            };
          });
        });
      }
    }
    module.exports = BannerWebpackPlugin;

CleanWebpackPlugin

作用：在 webpack 打包输出前将上次打包内容清空。

开发思路：

如何在打包输出前执行？

需要使用 compiler.hooks.emit 钩子, 它是打包输出前触发。

如何清空上次打包内容？

获取打包输出目录：通过 compiler 对象。

通过文件操作清空内容：通过 compiler.outputFileSystem 操作文件。

plugin的实现

class CleanWebpackPlugin {
      apply(compiler) {
        // 2. 获取打包输出的目录
        const outputPath = compiler.options.output.path;
        const fs = compiler.outputFileSystem;
        // 1. 注册钩子：在打包输出之前 emit
        compiler.hooks.emit.tap("CleanWebpackPlugin", (compilation) => {
          // 3. 通过fs删除打包输出的目录下的所有文件
          this.removeFiles(fs, outputPath);
        });
      }
      removeFiles(fs, filepath) {
        // 想要删除打包输出目录下所有资源，需要先将目录下的资源删除，才能删除这个目录
        // 1. 读取当前目录下所有资源
        const files = fs.readdirSync(filepath);
        // console.log(files); // [ 'images', 'index.html', 'js' ]
        // 2. 遍历一个个删除
        files.forEach((file) => {
          // 2.1 遍历所有文件，判断是文件夹还是文件
          const path = `${filepath}/${file}`;
          const fileStat = fs.statSync(path);
          // console.log(fileStat);
          if (fileStat.isDirectory()) {
            // 2.2 是文件夹，就得删除下面所有文件，才能删除文件夹
            this.removeFiles(fs, path);
          } else {
            // 2.3 是文件，直接删除
            fs.unlinkSync(path);
          }
        });
      }
    }
    module.exports = CleanWebpackPlugin;

AnalyzeWebpackPlugin

作用：分析 webpack 打包资源大小，并输出分析文件。

开发思路:

compiler.hooks.emit, 它是在打包输出前触发，我们需要分析资源大小同时添加上分析后的 md 文件。

plugin实现

class AnalyzeWebpackPlugin {
      apply(compiler) {
        compiler.hooks.emit.tap("AnalyzeWebpackPlugin", (compilation) => {
          // 1. 遍历所有即将输出文件，得到其大小
          /*
            将对象变成一个二维数组：
              对象：
                {
                  key1: value1,
                  key2: value2 
                }
              二维数组：
                [
                  [key1, value1],
                  [key2, value2]
                ]
          */
          const assets = Object.entries(compilation.assets);
          /*
              md中表格语法：
                | 资源名称 | 资源大小 |
                | --- | --- |
                | xxx.js | 10kb |
          */
          let content = `| 资源名称 | 资源大小 |
    | --- | --- |`;
          assets.forEach(([filename, file]) => {
            content += `\n| ${filename} | ${Math.ceil(file.size() / 1024)}kb |`;
          });
          // 2. 生成一个md文件
          compilation.assets["analyze.md"] = {
            source() {
              return content;
            },
            size() {
              return content.length;
            },
          };
        });
      }
    }
    module.exports = AnalyzeWebpackPlugin;

InlineChunkWebpackPlugin

作用：webpack 打包生成的 runtime 文件太小了，额外发送请求性能不好，所以需要将其内联到 js 中，从而减少请求数量。

开发思路:

我们需要借助 html-webpack-plugin 来实现

在 html-webpack-plugin 输出 index.html 前将内联 runtime 注入进去

删除多余的 runtime 文件

如何操作 html-webpack-plugin？官方文档

const HtmlWebpackPlugin = require("safe-require")("html-webpack-plugin");
    class InlineChunkWebpackPlugin {
      constructor(tests) {
        this.tests = tests;
      }
      apply(compiler) {
        compiler.hooks.compilation.tap("InlineChunkWebpackPlugin", (compilation) => {
          // 1. 获取html-webpack-plugin的hooks
          const hooks = HtmlWebpackPlugin.getHooks(compilation);
          // 2. 注册 html-webpack-plugin的hooks -> alterAssetTagGroups
          hooks.alterAssetTagGroups.tap("InlineChunkWebpackPlugin", (assets) => {
            // 3. 从里面将script的runtime文件，变成inline script
            assets.headTags = this.getInlineChunk(assets.headTags, compilation.assets);
            assets.bodyTags = this.getInlineChunk(assets.bodyTags, compilation.assets);
          });
          // 删除runtime文件
          hooks.afterEmit.tap("InlineChunkWebpackPlugin", () => {
            // 3. 从里面将script的runtime文件，变成inline script
            Object.keys(compilation.assets).forEach((filepath) => {
              if (this.tests.some((test) => test.test(filepath))) {
                delete compilation.assets[filepath];
              }
            });
          });
        });
      }
      getInlineChunk(tags, assets) {
        /*
          目前：[
            {
              tagName: 'script',
              voidTag: false,
              meta: { plugin: 'html-webpack-plugin' },
              attributes: { defer: true, type: undefined, src: 'js/runtime~main.js.js' }
            },
          ]
          修改为：
            [
              {
                tagName: 'script',
                innerHTML: runtime文件的内容
                closeTag: true 
              },
            ]
        */
        return tags.map((tag) => {
          if (tag.tagName !== "script") return tag;
          // 获取文件资源路径
          const filepath = tag.attributes.src;
          if (!filepath) return tag;
          if (!this.tests.some((test) => test.test(filepath))) return tag;
          return {
            tagName: "script",
            innerHTML: assets[filepath].source(),
            closeTag: true,
          };
        });
      }
    }
    module.exports = InlineChunkWebpackPlugin;

这里只是简单地拷贝了一下老师发的资料，也是方便自己查看，自己也做一个总结。更多内容请查看官网。

该课程的课件资料

webpack原理分析（loader, plugin）（下）

style-loader

plugin原理

Plugin 的作用

Plugin 工作原理

webpack内部钩子

Tapable

Plugin 构建对象

Compiler

Compilation

生命周期简图

编写插件

一些plugin的练习

BannerWebpackPlugin

CleanWebpackPlugin

AnalyzeWebpackPlugin

InlineChunkWebpackPlugin

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

webpack原理分析（loader, plugin）（下）

style-loader

plugin原理

Plugin 的作用

Plugin 工作原理

webpack内部钩子

Tapable

Plugin 构建对象

Compiler

Compilation

生命周期简图

编写插件

一些plugin的练习

BannerWebpackPlugin

CleanWebpackPlugin

AnalyzeWebpackPlugin

InlineChunkWebpackPlugin

热门文章

最新文章

相关课程

相关电子书

相关实验场景