Webpack: Plugin 学习——功能Plugin ：在 webpack 打包输出前将上次打包内容清空

CleanWebpackPlugin：在 webpack 打包输出前将上次打包内容清空

开发思路（什么时候执行 怎么做）：

• 如何在打包输出前执行？需要使用 compiler.hooks.emit 钩子, 它是打包输出前触发。
• 如何清空上次打包内容？
  • 获取打包输出目录：通过 compiler 对象。
  • 通过文件操作清空内容：通过 compiler.outputFileSystem 操作文件。

首先需要引入

  const CleanWebpackPlugin = require("./plugins/clean-webpack-plugin");
  new CleanWebpackPlugin()

 清除文件（readdirSync 读取文件夹下面的所有文件 statSync分析文件信息 isDirectory判断是文件夹还是文件 unlinkSync删除文件）

class CleanWebpackPlugin {
  apply(compiler) {
    // 2. 获取打包输出的目录
 
    const outputPath = compiler.options.output.path;//E:\ECMAScript6-11\webpack_loader\dist
    const fs = compiler.outputFileSystem;
    // 1. 注册钩子：在打包输出之前 emit
    compiler.hooks.emit.tap("CleanWebpackPlugin", (compilation) => {
      // 3. 通过fs删除打包输出的目录下的所有文件
        this.removeFiles(fs, outputPath);
    });
  }
  //removeFiles调用方法 
  removeFiles(fs, filepath) {
    // 想要删除打包输出目录下所有资源，需要先将目录下的资源删除，才能删除这个目录
    // 1. 读取当前目录下所有资源
    const files = fs.readdirSync(filepath);//返回数组
     //console.log(files); // [ 'images', 'index.html', 'js' ]
    // 2. 遍历一个个删除
    files.forEach((file) => {
      // 2.1 遍历所有文件，判断是文件夹还是文件
      const path = `${filepath}/${file}`;//组成路径
      const fileStat = fs.statSync(path);
      // console.log(fileStat);
      if (fileStat.isDirectory()) {
        // 2.2 是文件夹，就得删除下面所有文件，才能删除文件夹
        this.removeFiles(fs, path);
      } else {
        // 2.3 是文件，直接删除
        fs.unlinkSync(path);
      }
    });
  }
}

module.exports = CleanWebpackPlugin;
th}/${file}`;//组成路径

将配置文件的clean：true删除

const path = require("path");
//处理html
const HtmlWebpackPlugin = require("html-webpack-plugin");
//插件需要先引入再使用
const TestPlugin = require("./plugins/test-plugin2");
const BannerWebpackPlugin = require("./plugins/banner-webpack-plugin");
const CleanWebpackPlugin = require("./plugins/clean-webpack-plugin");
module.exports = {
  entry: "./src/main.js",//根据找到依赖
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "js/[name].js",// filename: 输出文件名
    //clean: true,
  },
  module: {//编译记载配置
    rules: [
      //   {
      //   test: /\.js$/,//处理js文件
      //   loader: "./loaders/test-loader.js",//将要处理文件作为参数传到test-loader.js
      // },
      {
        test: /\.js$/,//处理js文件
        // use: ["./loaders/demo/test1","./loaders/demo/test2"],
          // loader: "./loaders/demo/test3",
          // use: ["./loaders/demo/test4","./loaders/demo/test5","./loaders/demo/test6"],
           loader: "./loaders/clean-log-loader",
      },
      {
        test: /\.js$/,//处理js文件
           loader: "./loaders/banner-loader/index.js",
           options:{
              author:"老王",
              // age:"34"
           }
      },
      {
        test: /\.js$/,
        loader: "./loaders/babel-loader",
        options: {
          presets: ["@babel/preset-env"],//传入的预设选项@babel/preset-env
        },
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: "./loaders/file-loader",
        type: "javascript/auto", // 阻止webpack默认处理图片资源，只使用file-loader处理
      },
      {
        test: /\.css$/,
        // use: ["style-loader", "css-loader"],
        use: ["./loaders/style-loader","css-loader"],
      },

    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public/index.html"),
    }),
    //new TestPlugin(),
    new BannerWebpackPlugin({
      author: "老王",
    }),
    new CleanWebpackPlugin()
  ],
  
  mode: "production",
};