plugin的作用

plugin就是给我们的Webpack装入一系列的插件，拓展Webpack的功能

plugin和loader的区别

loader是一个转换器，把我们Webpack打包不了的文件转换为Webpack可以打包的模块。
plugin是一个拓展器，拓展Webpack的功能

plugin的使用步骤

安装plugin（注意有些plugin是Webpack自带的，不需要安装）
配置plugin 还是在webpack.config.js中配置plugin。

和我们loader的使用步骤基本一样

一些常用的plugin

添加版权声明的plugin

作用

安装BannerPlugin

BannerPlugin是Webpack自带的插件无需安装

配置BannerPlugin

就是在webpack.config.js中配置，我们的loader应该是配置在导出对象的module属性中，而我们plugin的配置应该是在导出对象的plugins属性中，它对应一个数组。注意点：

虽然是Webpack自带的，但是也需要导入Webpack才可以。最顶层有行代码：const webpack = require("webpack");
要添加的banner写在小括号中

重新打包，看效果：

打包html的插件

之前我们说过，我们需要把html文件也放到dist文件夹中，然后把这整个dist文件夹放到服务器上，将html文件放到dist文件夹中就是通过这个插件来实现的。

原理

这个插件就是在输出口中创建了一个html文件，然后可以给创建的html文件指定模板（说白了就是照着哪个文件抄）

作用

把我们的html文件放入dist文件夹中
将打包好的bundle.js通过script标签的形式添加到html文件中。以前我是手动添加的。

安装html-webpack-plugin插件

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

配置html-webpack-plugin插件

还是一样我们要将在node_modules中的html-webpack-plugin导入webpack.config.js.

const HtmlWebpackPlugin = require("html-webpack-plugin");

再打包。发现dist文件夹已经有index.html。并且自动引入了bundle.js 但是这个路径有问题。是什么导致的呢？
是因为我们之前设置了publicPath.它的作用就是之后所有生成路径的地方都会加上一个公共路径dist/,现在它已经失去了意义，所以将他移除。
第二个问题，这个index.html什么都没有我们得让他copy 我们原来的html。需要设置template 再打包

丑化js的插件

作用

项目发布前我们可能需要把js进行压缩使它的体积更小，通常就是清除缩进和清除注释。

安装uglifyjswebpackplugin

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

配置

重新打包。bundle.js被完全丑化。

Webpack--plugin（插件）