webpack-plugin

·  阅读 89

一个最简单的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

Hooktype调用
runAsyncSeriesHook开始读取 records 之前,钩入(hook into) compiler。
compileSyncHook一个新的编译(compilation)创建之后,钩入(hook into) compiler。
emitAsyncSeriesHook生成资源到 output 目录之前。
doneSyncHook编译(compilation)完成。

Compilation Hooks

Hooktype调用
buildModuleSyncHook在模块构建开始之前触发
finishModulesSyncHook所有模块都完成构建
optimizeSyncHook优化阶段开始时触发

实例

把打包的文件生成一个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
复制代码
分类:
前端
标签:
分类:
前端
标签: