webpack中插件plugin的介绍和一些插件的使用案例

---

1. 认识plugin

plugin 是什么？

• plugin是插件的意思，通常是用于对某个现有的架构进行扩展。
• webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

loader和plugin区别

• loader主要用于转换某些类型的模块，它是一个转换器。有关loader的介绍可以查这篇博客：webpack中的loader
• plugin是插件，它是对webpack本身的扩展，是一个扩展器。

plugin的使用过程：

• 步骤一：通过npm安装需要使用的plugin(某些webpack已经内置的插件不需要安装)
• 步骤二：在webpack.config.js中的 plugins 中配置插件

下面进行代码演示，我使用的webpack的版本是 3.6.0
演示代码在页面底部有下载链接，供学习使用

代码目录结构：

---

2. 插件的使用案例

2.1 BannerPlugin插件

BannerPlugin 属于webpack自带的插件，可以为打包的文件添加版权声明。

在webpack.config.js中进行配置，plugins是一个数组，new一个插件即可。

//webpack.config.js
let webpack = require('webpack');

module.exports = {
   
  // ... 其它配置
  plugins:[
      new webpack.BannerPlugin('最终版权归webchang所有')
  ]
}

打包程序，查看打包生成的文件头部：

2.2 html-webpack-plugin插件

目前，我们的index.html文件是存放在项目的根目录下的。

• 我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。
• 所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用 html-webpack-plugin 插件

html-webpack-plugin 插件可以为我们做这些事情：

• 在dist文件夹下自动生成一个index.html文件(可以提前指定模板来生成)
• 将打包的js文件，自动通过script标签插入到生成的index.html文件中的body中

安装：npm install html-webpack-plugin --save-dev

上面那种安装方式安装的是最新版的，和我的3.6.0版本的webpack不匹配，打包会报错，所以这个插件我使用的是3.2.0版本的。如何安装指定版本： npm install html-webpack-plugin@3.2.0 --save-dev

配置：

//webpack.config.js
let webpack = require('webpack');
let HTMLWebpackPlugin = require(