webpack的plugin（插件）

1. 添加版权的插件（简单）

        该插件的名字叫做BannerPlugin，属于webpack自带的插件

        按照下面的方式修改webpack.config.js文件

const webpack=require('webpack');

module.exports={
   ...
    plugins:[
        new webpack.BannerPlugin('最终版权归---所有')
    ]
}

重新打包的程序：查看bundle.js文件的头部，可以看到如下信息：

/*! 最终版权归---所有 */
/******/ (function(modules) { // webpackBootstrap
...

2. webpack-HtmlWebpackPlugin的使用

        首先，HtmlWebpackPlugin可以为我们做如下事情：

                1. 自动生成一个index.html文件（可以指定模板来生成）

                2. 将打包的js文件，自动通过script标签，插入到body中

        步骤：首先安装HtmlWebpackPlugin插件-->npm install html-webpack-plugin@3 --save-dev

                使用插件，修改webpack.config.js文件中的plugins部分的内容如下：

plugins:[
        new HtmlWebpackPlugin({
            template:'index.html'
        })
    ]

        注意：1. 我们需要删除之前在output中添加的publicPath属性，否则，插入到body中的script中的路径会出现问题；

                   2. 根据index.html模板，会在dist文件夹中形成新的index.html，由于我们已经形成了script标签，所以需要删除index.html模板中的scrip t引入标签

3. webpack-UglifyjsWebpackPlugin的使用

        首先，在项目发布之前，我们必要需要对js等文件进行压缩处理

                1. 对js文件进行压缩

                2. 使用第三方插件uglifyjs-webpack-plugin，并且版本号指定为1.1.1，与CLI2保持一致

        步骤：安装UglifyjsWebpackPlugin插件-->npm install uglifyjs-webpack-plugin@1.1.1 --save-dev（这里或许会出错，可以取消版本设置，之后再在package.json文件中，将版本号设置为1.1.1，再在终端中npm install）

                使用插件，修改webpack.config.js文件中的plugins部分的内容如下：

plugins:[
        new HtmlWebpackPlugin({
            template:'index.html'
        }),
        new UglifyjsWebpackPlugin()
    ]

则可以看到bundle.js会如下所示：

/*! 最终版权归学习者YYing所有 */!function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n)...