铁人12前哨站 - webpack 帮你管(3)

到了 webpack 的第三篇文章，今天要介绍的是 plugins 这个辅助 webpack 执行的区块，会以 clean-webpack-plugin 作为内容来介绍

前言：
在上一篇文章提到，当我们需要读取除了 javascript 和 json 以外的档案时需要透过 loader 去进行读取，然而当我们需要针对档案进行操作的时候就需要透过使用 plugin 去进行操作，下方介绍一款 plugin

clean-webpack-plugin
一般来说，在开发时为了防止快取机制使档案读取错误，我们会在要引用的档案中加入 hash 以防重複读取档案之问题，而当我们需要透过 webpack 去生产档案时，会需要将旧版档案先进行手动删除，当此动作重複过多次难免会产生烦躁感且影响效率，因此我们这边使用 clean-webpack-plugin 来保持专案清洁，下方介绍使用方式

先把此档案下载到专案内 npm install clean-webpack-plugin在 webpack.config.js 中引用此档案

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

宣告 plugins 区块，并且将 CleanWebpackPlugin 进行实体化

entry:...,output:{...},module:[...],plugins: [        new CleanWebpackPlugin(),    ]

在前一次 build 好后产生的资料夹 dist 内新建一个空文字档 123.txt ，并且执行 npm run build 你将会看到你的 123.txt 被删除且产生新的 index.js 档啰