Webpack：插件plugin

1. 概述

在webpack中，有时候我们需要用到扩展功能，比如添加版权、打包html、压缩js文件，这时候就可以用到插件plugin。

---

2. 和loader的区别

loader：用于加载转换某些类型的模块，是一个转换器
plugin：插件，对webpack进行扩展，是一个扩展器

---

3. 使用过程

使用过程和loader类似
1.通过npm 安装需要使用的插件（如果是webpack内置插件则不用）
2.在webpack.config.js中进行相关配置

本文主要介绍三个插件：
1.webpack内置插件BannerPlugin添加版权
2.打包html插件 html-webpack-plugin
3.压缩js插件 uglifyjs-webpack-plugin

更多插件请移步官网查看：https://webpack.docschina.org/plugins/

3.1 BannerPlugin添加版权

由于此插件是webpack内置插件，所以不需要下载，直接去webpack.config.js文件进行相关配置

  plugins: [
    new webpack.BannerPlugin('最终版权归Continue所有'),
  ],

显示如下

3.2 html-webpack-plugin 打包html

为啥需要？
因为我们在webpack打包时，默认不会将我们的index.html打包到dist文件夹，因此需要用到这个插件

安装：

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

配置：

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

这里指定了打包html

3.3 uglifyjs-webpack-plugin 压缩js

为啥需要？
压缩打包后的js文件，减小内存，增强性能

但是其实只是最后打包的时候需要，一般开发的时候为了方便调试先不用压缩。

安装

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

配置：

  plugins: [
 new uglifyJsWebpackPlugin()
  ],

附上配置版本，由于是适应vue cli2的版本，可能比较老