clean-webpack-plugin

清除dist文件夹，并且重新生成dist。

我们通常会遇到这种情况，如果重新打包了项目，那么dist目录会是这样的

dist
main-sjdkf5.js
main-sjdkf5.map
main-sda.js		//重新打包的bundle不会覆盖之前的
man-sda.map

所以就有了这个plugin。

使用

先去npm官网搜索这个插件，看怎么使用。

pnpm i clean-webpack-plugin -D

webpack.config,js

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "source-map",
  output: {
    filename: "[name]-[chunkhash:5].js",
  },
  //
  plugins: [new CleanWebpackPlugin()],//使用plugins
};

此时再次打包就会覆盖之前的dist文件夹的bundle了

猜测实现

那么我们可以猜测如何实现的这个plugin。

我们可以知道plugin中是有一个apply函数的，而compiler参数中有hooks，我们可以在emit生成文件的时候干预webpack。

因为webpack是运行在node下的，我们可以使用fs模块来对文件进行操作。其实就是利用fs模块先删除了dist文件夹。

然后webpack打包就重新生成了dist。

plugins

class CleanWebpackPlugin{
    constructor(){
        //xxxxxx
    }
    
    apply(compiler){
        compiler.hooks.emit.tap('clean-webpack-plugin',compilation=>{
            //利用node的fs模块删除dist文件夹
        })
    }
}