webpack-plugin

一个最简单的plugin

自定义插件

同步

// plugins/test-plugin.js

class DonePlugin {
  apply (compiler) {
    compiler.hooks.run.tap('DonePlugin', stats => {
      console.log('开始读取 records 之前---')
    })
  }
}
module.exports = DonePlugin

异步

// plugins/test-plugin.js

class DonePlugin {
  apply (compiler) {
    // cb形式
    compiler.hooks.emit.tapAsync('AsyncPlugin', (Compilation, cb) => {
      setTimeout(() => {
        console.log('文件发射出来 等一下')
        cb()
      }, 1000)
    })
    // promise形式
    compiler.hooks.emit.tapPromise('AsyncPlugin', Compilation => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('在等一秒')
          resolve()
        }, 1000)
      })
    })
  }
}
module.exports = DonePlugin

webpack.config.js

const path = require('path')
const TestPlugin = require('./plugins/test-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
  },
  plugins: [
    new TestPlugin()
  ],
}

Compiler和Compilation

Compiler Hooks

Hook	type	调用
run	AsyncSeriesHook	开始读取 records 之前，钩入(hook into) compiler。
compile	SyncHook	一个新的编译(compilation)创建之后，钩入(hook into) compiler。
emit	AsyncSeriesHook	生成资源到 output 目录之前。
done	SyncHook	编译(compilation)完成。

Compilation Hooks

Hook	type	调用
buildModule	SyncHook	在模块构建开始之前触发
finishModules	SyncHook	所有模块都完成构建
optimize	SyncHook	优化阶段开始时触发

实例

把打包的文件生成一个fileList.md

// FileListPlugin.js

class FileListPlugin {
  constructor ({ filename }) {
    this.filename = filename
  }
  apply (compiler) {
    compiler.hooks.emit.tap('aaa', compilation => {
      let assets = compilation.assets
      let content = `## 文件名 资源大小\r\n`
      Object.entries(assets).forEach(([filename, statObj]) => {
        content += `- ${filename} ${statObj.size()}\r\n`
      })
      assets[this.filename] = {
        source () {
          return content
        },
        size () {
          return content.length
        }
      }
    })
  }
}
module.exports = FileListPlugin