webpack plugins插件

本节我们来学习 webpack 中的插件（plugins），插件可以让 webpack 能够执行更多任务，从优化和压缩，到重新定义环境中的变量等，非常强大。

在 webpack 中， Plugin 和 loader 是两个比较容易混淆的概念。loader 用于对模块的源代码进行转换，所以 loader 的执行层面是单个的源文件。而插件的目的在于解决 loader 无法实现的问题，所以插件的功能更加强大，插件的执行层面是整个构建过程。

上一节我们在学习loader 时可以发现，在使用 loader 时是不需要引用的。而在使用插件时我们必须先通过 require 引用该插件。 webpack 中有丰富的内置插件和外部插件，并且允许用户自定义插件。

安装插件

例如我们通过在实际应用中经常会使用到的插件 html-webpack-plugin 来举例，讲一下插件的具体使用。html-webpack-plugin 插件可以用于自动生成基本的 HTML 页面。

首先我们需要先安装 html-webpack-plugin 插件，命令如下所示：

npm install html-webpack-plugin --save-dev

安装好后，插件会自动添加到 package.json 文件中的依赖中，并指定了插件的版本，如下图：

"devDependencies": {
   
    "css-loader": "^3.6.0",
    "html-webpack-plugin"