webpack 实现 CleanWebpackPlugin

__畫戟__

已于 2023-05-25 01:53:10 修改

阅读量315

点赞数 1

分类专栏： Webpack Node.js 前端工程化文章标签： webpack node.js CleanPlugin webpack 编写插件 webpack编写plugin

于 2023-05-25 01:47:16 首次发布

本文链接：https://blog.csdn.net/qq_41887214/article/details/130858651

版权

前端工程化同时被 3 个专栏收录

73 篇文章 19 订阅

订阅专栏

Node.js

44 篇文章 21 订阅

订阅专栏

Webpack

36 篇文章 21 订阅

订阅专栏

文章介绍了如何使用CleanWebpackPlugin插件在webpack构建过程中删除输出目录的文件。首先，通过npm安装webpack和webpack-cli，然后设置项目目录结构。接着，引入CleanWebpackPlugin插件到webpack配置，并在emit钩子中清除输出目录。最后，展示了CleanWebpackPlugin类的实现，包括删除文件和目录的方法。

摘要由CSDN通过智能技术生成

文章目录

CleanWebpackPlugin 插件用于删除/清理构建文件夹。

准备工作

npm i webpack webpack-cli

创建如下项目目录

├── plugins                          # 编译打包后的输出目录
├── src
│   └── index.js
├── package.json
├── package-lock.json
└── webpack.config.js

代码实现

webpack.config.js

const CleanWebpackPlugin = require('./plugin/CleanWebpackPlugin');

module.exports = {
  mode: 'production',

  output: {
    // clean: true,
  },

  plugins: [
    new CleanWebpackPlugin(),
  ],
};

plugin/CleanWebpackPlugin.js

class CleanWebpackPlugin {
  apply(compiler) {
    // 获取操作文件的对象
    const fs = compiler.outputFileSystem;

    // 绑定到 “emit” 钩子，在新的打包产物输出前进行clean
    compiler.hooks.emit.tapAsync('CleanWebpackPlugin', (compilation, callback) => {
      // 获取输出文件目录
      const outputPath = compiler.options.output.path;

      // 删除目录所有文件
      this.removeFiles(fs, outputPath);
      callback();
    });
  }

  removeFiles(fs, filePath) {
    console.log('filePath', filePath);
    // 读取当前目录下所有文件
    const exists = fs.existsSync(filePath);
    console.log('exists', exists);
    const files = fs.existsSync(filePath) ? fs.readdirSync(filePath) : [];

    // 递归删除
    files.forEach((file) => {
      // 获取文件完整路径
      const path = `${filePath}/${file}`;
      // 判断是否是文件夹
      if (fs.statSync(path).isDirectory()) {
        // 是文件夹则需要递归
        this.removeFiles(fs, path);
      } else {
        // 是文件则要直接删除，且是同步删除
        fs.unlinkSync(path);
      }
    });

    if (exists) {
      // 最后删除当前目录
      fs.rmdirSync(filePath);
    }
  }
}

module.exports = CleanWebpackPlugin;