Webpack插件plugin

顾名思义，插件是用来扩展Webpack功能的，本章重点讲解一些常用的扩展插件。

虽然名字叫插件，但插件是Webpack的骨干，Webpack自身也建立于插件系统之上。

本章先介绍一些常用扩展插件的使用，在后序章节讲解Webpack的原理时，会讲解其自身如何建立于插件系统之上。

在Webpack中使用插件非常简单，只需要在配置项里增加一个plugins项即可。plugins是一个数组，每一个数组元素是一个插件。

我们如何寻找插件呢？通常可以选择开源社区提供的，例如clean-webpack-plugin和clean-webpack-plugin等是社区里广泛使用的插件。

除了开源社区提供的插件，Webpack自己也会提供一部分插件供我们使用。

下面是一个简单的Webpack插件的使用，先引入clean-webpack-plugin插件，然后在plugins配置项里放入该插件的实例就可以使用了。

webpack.config.js

  const path = require('path');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  module.exports = {
    entry: './a.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle1.js'
    },
    plugins:[
      new CleanWebpackPlugin()    
    ],
    mode: 'none'
  };

通常plugins数组每一个元素都是插件构造函数New出来的一个实例，根据每一个插件的特点，可能会需要向其参数里传递各种配置参数，这个时候需要参阅该插件的文档来进行配置。

现在广泛使用的插件都有默认的参数，可以免去配置，只有在需要特殊处理时，我们进行手动配置参数。

本章重点介绍三个插件，这三个插件在我们实际开发中基本都要使用到，后续章节也会介绍一些其它插件。学会这三个插件的使用，我们就掌握了Webpack中使用插件的基本套路，之后在需要的时候再去寻找能满足我们功能的插件即可。