webpack之plugin07

1、认识plugin

plugin：插件，通常用于对某个现有的架构进行扩展。

webpack中的插件可以对webpack现有的功能进行各种扩展，如打包优化、文件压缩等。

2、plugin与loader的区别

loader：是转换器，主要用于转换某些类型的模块。

plugin：是扩展器，主要对webpack自身功能进行扩展。

3、几种常见的plugin及其使用

3.1 BannerPlugin（webpack自带插件）

BannerPlugin：为打包的文件添加版权声明。

如，vue文件的版权声明（MIT开源协议）

在webpack.config.js中进行配置，如图

代码：

……
const webpack = require('webpack');
……
plugins: [
    // webpack自带插件
    new webpack.BannerPlugin('最终版权归withlan所有。')
  ],

打包之后的效果：

3.2 htmlWebpackPlugin

使用htmlWebpackPlugin插件将html文件打包到dist文件夹中。

htmlWebpackPlugin的作用：

• 可以根据指定模板自动生成一个index.html文件；
• 通过script标签将打包的js文件自动插入到index.html的body中

安装配置htmlWebpackPlugin插件：

• 安装
  在终端输入npm install html-webpack-plugin@4 --save-dev，如图

  webpack4需要安装html-webpack-plugin4，否则会报错
  
  安装成功
  

• 配置
  在webpack.config.js文件中进行配置，如图
  
  打包之后的效果
  

• 指定模板在dist文件夹中生成index.html文件

  指定的模板
  更改webpack.config.js文件中的配置
  
  打包后效果：
  

3.3 uglifyjsWebpackPlugin

uglifyjsWebpackPlugin：对打包的js文件进行压缩（删掉注释、回车等）

安装配置htmlWebpackPlugin插件：

• 安装
  在终端输入npm install uglifyjs-webpack-plugin --save-dev（建议把npm镜像下载地址切换为淘宝镜像npm config set registry http://registry.npm.taobao.org/，下载更快）
  
• 配置
  在webpack.config.js文件中进行配置
  
• 打包之后的效果