webpack plugin

lowMan
229 阅读6分钟

plugin的作用

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

plugin工作原理

webpack就像一条生产线，要经过一系列处理流程后才能将原文件处理成输出结果，这条生产线上每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理，插件就像是一个插入生产线中的功能，在特定的时机对生产线上的资源做处理，webpack通过tapable来组织这条复杂的生产线，webpack在运行过程中会广播事件，插件只要关心他关心的事件，就能假如到这条生产线中，去改变生产线的运作，webpack的事件流机制保证了插件的有序性，使得整个系统扩展性很好。

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

webpack内部的钩子

Tapable

Tapable为webpack提供了插件接口(钩子)类型定义，它是webpack的核心功能库，webpack目前有10种hooks， 在Tapable源码汇总可以看到，他们是：

/*
	MIT License http://www.opensource.org/licenses/mit-license.php
	Author Tobias Koppers @sokra
*/
"use strict";
exports.__esModule = true;
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还统一暴露了3个方法给插件，用于注入不同类型的自定义构建行为。

tap: 可以注册同步钩子和异步钩子
tapAsync： 回调方式注册异步钩子
tapPromise： promise方式注册异步钩子

plugin构建对象

Compiler

Compiler对象中包含着完整的webpack配置环境，每次启用webpack构建时，他都是独一无二，仅仅会创建一次的对象。
这个对象会在首次启动webpack时创建，我们可以通过Compiler对象访问到webpack的主环境配置，比如loader、plugin等配置信息。
它有以下主要属性：

compiler.options:可以访问本次启动webpack时所有的配置文件，包括但不限于loaders、entry、output、plugin等完成的配置信息。
compiler.inputFileSystem 和 compiler.outputFileSystem,相当于nodejs中fs。
compiler.hooks可以注册tapable中不同种类的hook，从而可以在compiler植入不同的逻辑。
有哪些钩子？ https://www.webpackjs.com/api/compiler-hooks/
Compilation

compilation代表一次资源的构建，compilation实例可以访问所有的模块和他们的依赖。
一个compilation对象会构建所有依赖图中所有模块。进行编译，在编译阶段，模块会被加载(load)、封存(seal)、优化(optimize)、分块儿(chunk)、哈希(hash)和重新创建(restore).
有哪些钩子？www.webpackjs.com/api/compila…

小结：webpack只会创建一个compiler对象，处理每种类型的资源时都会创建一个compilation对象
webpack执行流程:

image.png

开发一个插件

plugins/test-plugin.js

/*
 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

注册钩子

文档： www.webpackjs.com/api/compila…

/*
 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');
    // 注册environment钩子
    // 由文档可知，environment是同步个钩子，所以需要同步注册
    // 此钩子时机就在配置文件中初始化插件之后
    compiler.hooks.environment.tap('TestPlugin', () => {
      console.log('TestPlugin environment');
    });
    // AsyncSeriesHook 下面是异步串行注册钩子(从上到下依次执行，上移个任务结束才执行下面的钩子)
    // emit钩子是异步串行钩子(AsyncSeriesHook)； 输出 asset 到 output 目录之前执行
    // 执行顺序是emit111-emit222-emit333
    compiler.hooks.emit.tap('TestPlugin', (compilation) => {
      console.log('TestPlugin emit111');
    });
    // 用回调的方式注册emit钩子
    compiler.hooks.emit.tapAsync('TestPlugin', (compilation, callback) => {
      setTimeout(() => {
        console.log('TestPlugin emit222');
        // 异步操作完，调用callback才会继续往下执行
        callback();
      }, 2000)
    });
    // 用tapPromise的方式注册emit钩子
    compiler.hooks.emit.tapPromise('TestPlugin', (compilation, callback) => {
      return new Promise((resolve) => {
        setTimeout(() => {
          console.log('TestPlugin emit333'); // 222 执行完了才执行333
          resolve(); // resolve成功 resolve失败
        }, 1000);
      })
    });

    // 异步并行AsyncParallelHook(一上去全都触发，瞬先干完谁先执行)
    // 注册make钩子,他是异步并行钩子
    // 执行顺序是make222-make333-make111
    compiler.hooks.make.tapAsync('TestPlugin', (compilation, callback) => {
      // 注册compilation钩子
      // 需要在compilation钩子函数触发前注册
      // seal：compilation 对象停止接收新的模块时触发， 是异步钩子 SyncHook
      compilation.hooks.seal.tap('TestPlugin', () => {
        console.log('TestPlugin seal');
      })
      setTimeout(() => {
        console.log('TestPlugin make111');
        // 异步操作完，调用callback才会继续往下执行
        callback();
      }, 3000)
    });
    compiler.hooks.make.tapAsync('TestPlugin', (compilation, callback) => {
      setTimeout(() => {
        console.log('TestPlugin make222');
        callback();
      }, 1000)
    });
    compiler.hooks.make.tapAsync('TestPlugin', (compilation, callback) => {
      setTimeout(() => {
        console.log('TestPlugin make333');
        callback();
      }, 2000)
    });
  }
}

module.exports = TestPlugin

node调试compiler和compilation对象

如果在程序中用console.log打印这两个对象，因为对象过大，会非常难查看，下面可以提供一种node调试的方法：
在执行代码的首行打一个debugger

class TestPlugin {
  constructor() {
    console.log('TestPlugin constructor');
  }
  apply(compiler) {
    debugger;
  }
}

在package.json中添加一个脚本：

--inspect:意思是调试  -brk：意思是打个断点
./node_modules/webpack-cli/bin/cli.js： 要执行的脚本
"scripts": {
    "debug": "node --inspect-brk ./node_modules/webpack-cli/bin/cli.js"
  },

运行该命令

image.png
打开任何chrome浏览器，f12打开调试，看到如下图标，点开会出现一个调试窗口

image.png
点击调试按钮会快速到下一个断点：(也可以手动打断点，调试想看的变量)

image.png

自定义BannerWebpackPlugin

1.给打包输出文件添加注释
2.开发思路
1)打包输出前添加注释。需要使用compiler.hooks.emit,它是打包输出前触发.
2）如何获取打包输出前的资源?compilation.assets可以获取所有即将输出的资源文件。
plugins/banner-webpack-plugin.js

class BannerWebpackPlugin {
  constructor(options = {}) {
    this.options = options;
  }
  apply(compiler) {
    // 在资源输出之前触发
    compiler.hooks.emit.tapAsync('BannerWebpackPlugin', (compilation, callback) => {
      const extensions = ['css', 'js'];
      // 1.获取即将输出的资源文件，compilation.assets
      // 2.过滤只保留js和css资源
      const assets = Object.keys(compilation.assets).filter(assetPath => {
        const splitted = assetPath.split('.');
        const extension = splitted[splitted.length - 1];
        return extensions.includes(extension);
      });
      // 3.遍历剩下的资源添加上注释
      const prefix = `
/**
 * Author: ${this.options.author}
 */
`
      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;
          },
        }
      });
      // 调用回调，才会继续往下执行
      callback();
    })
  }
}

module.exports = BannerWebpackPlugin

使用：(使用model：production)

plugins: [
    new BannerWebpackPlugin({
      author: '老王'
    })
]

自定义cleanWebpackPlugin

1.作用：将webpack打包输出前将上次打包内容清空
2.开发思路：
1)如何在打包输出前执行？需要用到compiler.hooks.emit钩子，他是在打包输出前执行
2)如何清空上次打包内容？
.获取打包输出目录
.通过文件操作清空内容：通过compiler.outputFileSystem清空文件
plugins/clean-webpack-plugin.js


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

module.exports = CleanWebpackPlugin

自定义AnalyzeWebpackPlugin

1.作用：输出webpack打包资源大小，并输出分析文件
2.开发思路：
在哪做？compiler.hooks.emit,他是在打包输出前触发，我们需要知道文件大小同时输出分析后的md文件
plugins/analyze-webpack-plugin.js


class AnalyzeWebpackPlugin {
  apply(compiler) {
    compiler.hooks.emit.tap('AnalyzeWebpackPlugin', (compilation) => {
      // 1.遍历所有即将输出的文件，得到其大小
      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

1.作用：webpack打包生成的runtime文件太小了，额外发送请求，性能不好，所以需要将其内联到js中，从而减少请求数量。
2.开发思路：
1)我们需要借助html-webpack-plugin来实现
.在html-webpack-plugin输出index.html前，将runtime注入进去
.移除多余的runtime文件
2)如何操作： html-webpack-plugin 文档：github.com/jantimon/ht…

image.png

plugins/inline-chunk-webpack-plugin

// npm i safe-require -D
const HtmlWebpackPlugin = require('safe-require')('html-webpack-plugin'); // 这样使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',(assets) => {
        Object.keys(compilation.assets).forEach(filePath => {
          // if((/runtime(.*)\.js$/g).test(filePath)) {
          //   delete compilation.assets[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; // 说明本来就是行内script标签
      if(!this.tests.some(test => test.test(filePath))) return tag; // 不是runtime文件
      return {
        tagName: 'script',
        innerHTML: assets[filePath].source(),
        closeTag: true, // 闭合标签
      };
    });
  }
}
module.exports = InlineChunkWebpackPlugin

使用：

new InlineChunkWebpackPlugin([/runtime(.*)\.js$/g])
avatar
文章
阅读
粉丝