(掌握)webpack插件-Clean插件

最新推荐文章于 2024-07-12 23:55:14 发布

XiaoYu2002-AI

最新推荐文章于 2024-07-12 23:55:14 发布

阅读量418

点赞数 1

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/weixin_70037637/article/details/138203237

版权

Webpack详解专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍了如何在Webpack项目中使用CleanWebpackPlugin插件，以在每次构建前自动清空输出目录，确保只包含最新构建结果，提高开发效率。

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

CleanWebpackPlugin

前面我们演示的过程中，每次修改了一些配置，重新打包时，都需要手动删除dist文件夹：
- 我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin
- CleanWebpackPlugin 是一个Webpack插件，用于在每次构建前清空输出目录。通过使用 new 关键字来创建一个 CleanWebpackPlugin 的实例，我们可以将其作为一个插件加入到Webpack构建流程中，让Webpack在每次构建之前自动清空输出目录。这样我们就能够保证输出目录中只包含最新的构建结果，而不会留下过时的文件
首先，我们先安装这个插件：

npm install clean-webpack-plugin -D

之后在插件中配置：

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

module.exports = {
  //其他省略
  plugins:[
    //Webpack的配置中，我们通常使用 new 关键字来创建一个Plugin实例
    //在Webpack的配置中，Plugins通常是以实例化的形式添加到配置中的，这是因为插件实例化后可以传递一些参数，从而达到更加灵活的配置目的。同时，一个插件实例通常只能使用一次，因此需要在每个插件前使用 new 关键字来创建新的实例
    new CleanWebpackPlugin()
  ]
}