js 关系图插件_30分钟入门webpack4 三 （插件）

前一章中我们简单的了解了webpack中的入口与输出，知道了webpack是从什么地方开始处理资源，最后又是将资源输出到了什么地方，但是我们并没有真的实现一些功能。下面我们还是在原有例子的基础上继续我们的实现来了解webpack的插件(plugins)机制。

其实webpack自身的功能并不强大，他所完成的多数功能都是通过插件(plugins)以及后面将要介绍的loader来完成的。

插件是webpack的主要甚至是支柱功能，他的目的就是为了解决loader无法实现的功能。webpack有丰富的内置插件和外部插件，并且允许用户自定义插件。

插件的使用一般分为安装、引入、实例化三个步骤。

废话不多说，看看我们要做些什么吧！

一、清除dist目录中的内容(clean-webpack-plugin插件)

前面我们通过ngx webpack命令处理js的时候，我们发现dist目录中会有一些历史遗留，按理来说src目录是我们的开发目录，dist目录是我们需要发布的目录，是干干净净没有任何多余内容的目录，但是我们每次在使用命令前手动删除dist目录中的内容太麻烦了，能不能让webpack在输出前先将dist里的内容清除了，然后在输出新的东西？这样我们就不需要干预dist目录，毕竟我们使用的是webpack这个自动化的资源打包工具。这就用到了clean-webpack-plugin插件。

这个插件是外部插件，webpack自身没有清除目录内容的功能，所以先要安装这个插件，使用如下命令：

cnpm install clean-webpack-plugin --save-dev

安装成功后，配置webpack.config.js文件，引入这个插件然后实例化(使用或者配置)这个插件，引入和实例化的结果如下图：

// const CleanWebpackPlugin = require('clean-webpack-plugin');const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = { entry:{ "index":"./src/index.js