webpack插件的配置

添加版权插件

1. 在webpack.config.js文件中添加webpack包，之后在module.exports属性中添加plugins，添加版权插件

// 添加webpack
const webpack = require('webpack');

  // 添加插件
  plugins: [
    // 添加版权的插件
    new webpack.BannerPlugin('最终版权归12345所有')
  ]

2. 对项目进行打包后，在dist文件夹中的bundle.js文件中出现新添加的版权信息

HtmlWebpack插件

1. 该插件是对html文件进行打包的插件。首先，先对该插件进行安装，输入命令：npm install [email protected] --save-dev
2. 之后，进入webpack.config.js文件，添加html-webpack-plugin包，在plugins中添加htmlwebpack插件。由于在dist文件夹中会生成打包后的文件，所以output中的publicPath属性就不需要了，删除该属性

// 添加打包html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

    // 添加打包html的插件
    new HtmlWebpackPlugin({
      // 打包后的文件按照index.html中的格式
      template: 'index.html'
    })

UglifyjsWebpack插件

1. 该插件是对bundle.js文件进行压缩的插件。输入命令进行安装：npm install [email protected] --save-dev
2. 之后，进入webpack.config.js文件，添加uglifyjs-webpack-plugin包，在plugins中添加uglifyjsWebpack插件

// 添加压缩js文件的插件
const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');

    // 添加压缩js文件的插件
    new UglifyJsWebpackPlugin()