Webpack - Plugin

意在梳理

plugin 是一个类，用来扩展 Webpack 的能力

核心对象

• 负责整体编译流程的 Compiler
• 负责模块编译的 Compilation

打包过程的某个阶段 -> 模块编译的某个阶段 -> 注入一些操作

使用

module.exports = {
  plugins: [
    new SomePlugin({
      // ... 一些配置
    }),
  ]
}

编写 mini-plugin

实践，练手✋

mini-clean-plugin

• 打包前清空 dist

CleanWebpackPLugin.js

const { sync: delSync } = require('del')

class CleanWebpackPlugin {
  apply(compiler) {
    compiler.hooks.emit.tap(CleanWebpackPlugin.name, () => {
      delSync(['**/*'], {
        cwd: compiler.options.output.path,
      })
    })
  }
}

module.exports = CleanWebpackPlugin

webpack.config.js

{
  plugins: [
    new CleanWebpackPlugin()
  ]
}