Plugin 原理 ​

// 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')

class TestPlugin {
  constructor() {
    console.log('TestPlugin constructor()')
  }
  // 1. webpack读取配置时，new TestPlugin() ，会执行插件 constructor 方法
  // 2. webpack创建 compiler 对象
  // 3. 遍历所有插件，调用插件的 apply 方法
  apply(compiler) {
    console.log('TestPlugin apply()')
  }
}

module.exports = TestPlugin

class TestPlugin {
  constructor() {
    console.log('TestPlugin constructor()')
  }
  // 1. webpack读取配置时，new TestPlugin() ，会执行插件 constructor 方法
  // 2. webpack创建 compiler 对象
  // 3. 遍历所有插件，调用插件的 apply 方法
  apply(compiler) {
    console.log('TestPlugin apply()')

    // 从文档可知, compile hook 是 SyncHook, 也就是同步钩子, 只能用tap注册
    compiler.hooks.compile.tap('TestPlugin', (compilationParams) => {
      console.log('compiler.compile()')
    })

    // 从文档可知, make 是 AsyncParallelHook, 也就是异步并行钩子, 特点就是异步任务同时执行
    // 可以使用 tap、tapAsync、tapPromise 注册。
    // 如果使用tap注册的话，进行异步操作是不会等待异步操作执行完成的。
    compiler.hooks.make.tap('TestPlugin', (compilation) => {
      setTimeout(() => {
        console.log('compiler.make() 111')
      }, 2000)
    })

    // 使用tapAsync、tapPromise注册，进行异步操作会等异步操作做完再继续往下执行
    compiler.hooks.make.tapAsync('TestPlugin', (compilation, callback) => {
      setTimeout(() => {
        console.log('compiler.make() 222')
        // 必须调用
        callback()
      }, 1000)
    })

    compiler.hooks.make.tapPromise('TestPlugin', (compilation) => {
      console.log('compiler.make() 333')
      // 必须返回promise
      return new Promise((resolve) => {
        resolve()
      })
    })

    // 从文档可知, emit 是 AsyncSeriesHook, 也就是异步串行钩子，特点就是异步任务顺序执行
    compiler.hooks.emit.tapAsync('TestPlugin', (compilation, callback) => {
      setTimeout(() => {
        console.log('compiler.emit() 111')
        callback()
      }, 3000)
    })

    compiler.hooks.emit.tapAsync('TestPlugin', (compilation, callback) => {
      setTimeout(() => {
        console.log('compiler.emit() 222')
        callback()
      }, 2000)
    })

    compiler.hooks.emit.tapAsync('TestPlugin', (compilation, callback) => {
      setTimeout(() => {
        console.log('compiler.emit() 333')
        callback()
      }, 1000)
    })
  }
}

module.exports = TestPlugin

// plugins/banner-webpack-plugin.js
class BannerWebpackPlugin {
  constructor(options = {}) {
    this.options = options
  }

  apply(compiler) {
    // 需要处理文件
    const extensions = ['js', 'css']

    // emit是异步串行钩子
    compiler.hooks.emit.tapAsync(
      'BannerWebpackPlugin',
      (compilation, callback) => {
        // compilation.assets包含所有即将输出的资源
        // 通过过滤只保留需要处理的文件
        const assetPaths = Object.keys(compilation.assets).filter((path) => {
          const splitted = path.split('.')
          return extensions.includes(splitted[splitted.length - 1])
        })

        assetPaths.forEach((assetPath) => {
          const asset = compilation.assets[assetPath]

          const source = `/*
* Author: ${this.options.author}
*/\n${asset.source()}`

          // 覆盖资源
          compilation.assets[assetPath] = {
            // 资源内容
            source() {
              return source
            },
            // 资源大小
            size() {
              return source.length
            }
          }
        })

        callback()
      }
    )
  }
}

module.exports = BannerWebpackPlugin

// plugins/clean-webpack-plugin.js
class CleanWebpackPlugin {
  apply(compiler) {
    // 获取操作文件的对象
    const fs = compiler.outputFileSystem
    // emit是异步串行钩子
    compiler.hooks.emit.tapAsync(
      'CleanWebpackPlugin',
      (compilation, callback) => {
        // 获取输出文件目录
        const outputPath = compiler.options.output.path
        // 删除目录所有文件
        const err = this.removeFiles(fs, outputPath)
        // 执行成功err为undefined，执行失败err就是错误原因
        callback(err)
      }
    )
  }

  removeFiles(fs, path) {
    try {
      // 读取当前目录下所有文件
      const files = fs.readdirSync(path)

      // 遍历文件，删除
      files.forEach((file) => {
        // 获取文件完整路径
        const filePath = `${path}/${file}`
        // 分析文件
        const fileStat = fs.statSync(filePath)
        // 判断是否是文件夹
        if (fileStat.isDirectory()) {
          // 是文件夹需要递归遍历删除下面所有文件
          this.removeFiles(fs, filePath)
        } else {
          // 不是文件夹就是文件，直接删除
          fs.unlinkSync(filePath)
        }
      })

      // 最后删除当前目录
      fs.rmdirSync(path)
    } catch (e) {
      // 将产生的错误返回出去
      return e
    }
  }
}

module.exports = CleanWebpackPlugin

// plugins/analyze-webpack-plugin.js
class AnalyzeWebpackPlugin {
  apply(compiler) {
    // emit是异步串行钩子
    compiler.hooks.emit.tap('AnalyzeWebpackPlugin', (compilation) => {
      // Object.entries将对象变成二维数组。二维数组中第一项值是key，第二项值是value
      const assets = Object.entries(compilation.assets)

      let source = '# 分析打包资源大小 \n| 名称 | 大小 |\n| --- | --- |'

      assets.forEach(([filename, file]) => {
        source += `\n| ${filename} | ${file.size()} |`
      })

      // 添加资源
      compilation.assets['analyze.md'] = {
        source() {
          return source
        },
        size() {
          return source.length
        }
      }
    })
  }
}

module.exports = AnalyzeWebpackPlugin

// plugins/inline-chunk-webpack-plugin.js
const HtmlWebpackPlugin = require('safe-require')('html-webpack-plugin')

class InlineChunkWebpackPlugin {
  constructor(tests) {
    this.tests = tests
  }

  apply(compiler) {
    compiler.hooks.compilation.tap(
      'InlineChunkWebpackPlugin',
      (compilation) => {
        const hooks = HtmlWebpackPlugin.getHooks(compilation)

        hooks.alterAssetTagGroups.tap('InlineChunkWebpackPlugin', (assets) => {
          assets.headTags = this.getInlineTag(
            assets.headTags,
            compilation.assets
          )
          assets.bodyTags = this.getInlineTag(
            assets.bodyTags,
            compilation.assets
          )
        })

        hooks.afterEmit.tap('InlineChunkHtmlPlugin', () => {
          Object.keys(compilation.assets).forEach((assetName) => {
            if (this.tests.some((test) => assetName.match(test))) {
              delete compilation.assets[assetName]
            }
          })
        })
      }
    )
  }

  getInlineTag(tags, assets) {
    return tags.map((tag) => {
      if (tag.tagName !== 'script') return tag

      const scriptName = tag.attributes.src

      if (!this.tests.some((test) => scriptName.match(test))) return tag

      return {
        tagName: 'script',
        innerHTML: assets[scriptName].source(),
        closeTag: true
      }
    })
  }
}

module.exports = InlineChunkWebpackPlugin