30分钟入门webpack4 三 (插件)（webpack的插件htmlwebpackplugin的作用）

前一章中我们简单的了解了webpack中的入口与输出，知道了webpack是从什么地方开始处理资源，最后又是将资源输出到了什么地方，但是我们并没有真的实现一些功能。下面我们还是在原有例子的基础上继续我们的实现来了解webpack的插件（plugins）机制。

其实webpack自身的功能并不强大，他所完成的多数功能都是通过插件（plugins）以及后面将要介绍的loader来完成的。

插件是webpack的主要甚至是支柱功能，他的目的就是为了解决loader无法实现的功能。webpack有丰富的内置插件和外部插件，并且允许用户自定义插件。

插件的使用一般分为安装、引入、实例化三个步骤。

废话不多说，看看我们要做些什么吧！

一、清除dist目录中的内容（clean-webpack-plugin插件）

前面我们通过ngx webpack命令处理js的时候，我们发现dist目录中会有一些历史遗留，按理来说src目录是我们的开发目录，dist目录是我们需要发布的目录，是干干净净没有任何多余内容的目录，但是我们每次在使用命令前手动删除dist目录中的内容太麻烦了，能不能让webpack在输出前先将dist里的内容清除了，然后在输出新的东西？这样我们就不需要干预dist目录，毕竟我们使用的是webpack这个自动化的资源打包工具。这就用到了clean-webpack-plugin插件。

这个插件是外部插件，webpack自身没有清除目录内容的功能，所以先要安装这个插件，使用如下命令：

cnpm install clean-webpack-plugin --save-dev

安装成功后，配置webpack.config.js文件，引入这个插件然后实例化（使用或者配置）这个插件，引入和实例化的结果如下图：

// const CleanWebpackPlugin = require('clean-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
 entry:{
 "index":"./src/index.js",
 "login":"./src/login.js"
 },
 output:{
 filename:"[name].js"
 },
 plugins:[
 new CleanWebpackPlugin()
 ]
}

这里需要注意下代码中的注释部分，由于写这篇文章之前所我所使用的clean-webpack-plugin插件是2.0版本，这还没几个月呢就已经到3.0了，所以在声明的时候有变化，注释掉的是以前的写法，我们安装的clean-webpack-plugin是3.0的，所以引入写法有些变化。

代码中plugins项中就是添加插件的地方，实例化的那个函数名称就是const定义的常量名称，这也是需要注意的。

实例化的时候我们没有填写任何参数，所以默认删除的是dist目录下的内容。（本来是想添加一些参数的，但是发觉clean-webpack-plugin 3.0变化有点大，就没扩展，想了解的朋友可以自己查看下文档）

然后运行命令 ngx webpack，dist目录中的内容又重新生成，并且原来的遗留文件都已经没有了。

二、html文件与js文件相关联（html-webpack-plugin插件）

我们项目中的html还没有使用，同时html中也没有引入js，现在的目的就是要将html也要打包到dist并且html也要引入对应的js。这时我们就用到了html-webpack-plugin 插件。

安装：

cnpm install html-webpack-plugin --save-dev

修改webpack.config.js，引入html-webpack-plugin并且实例化：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 entry:{
 "index":"./src/index.js",
 "login":"./src/login.js"
 },
 output:{
 filename:"[name].js"
 },
 plugins:[
 new CleanWebpackPlugin(),
 new HtmlWebpackPlugin({
 template:'./src/index.html',
 filename:'index.html',
 chunks:['index'],
 hash:true
 }),
 new HtmlWebpackPlugin({
 template:'./src/login.html',
 filename:'login.html',
 chunks:['login'],
 hash:true
 })
 ]
}

我们有两个html文件所以实例化了两个html-webpack-plugin，template是模板路径，filename是定义输出文件的名称，chunks是定义包含的脚本是什么，hash定义为true是让html添加js链接的时候添加后缀（类似index.js?12323456），防止发布的时候有缓存。

这里需要说明一点的是如果不想让html页面引入脚本的话，chunks要写成这样chunks:[""]，如果chunks这一项都没有的话，默认所有js都会添加的这个页面上。

好了运行命令ngx webpack，我们发现html，js文件都打包到了dist目录，并且html中自动添加了对应的js。

假如说我有公共的common.js文件的话，也可以这样写：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 entry:{
 "common":"./src/common.js",
 "index":"./src/index.js",
 "login":"./src/login.js"
 },
 output:{
 filename:"[name].js"
 },
 plugins:[
 new CleanWebpackPlugin(),
 new HtmlWebpackPlugin({
 template:'./src/index.html',
 filename:'index.html',
 chunks:["common","index"],
 hash:true
 }),
 new HtmlWebpackPlugin({
 template:'./src/login.html',
 filename:'login.html',
 chunks:["common","login"],
 hash:true
 })
 ]
}

我们注意到我们所自动添加的js是自动添加到了body中，我们如何让webpack将js放入head中呢？其实是有方法的，只要在实例化html-webpack-plugin的时候添加一个inject:head或者injecy:false就行了。

三、总结

其实这两个插件还有很多的配置参数，我们只是通过最简单的方法了解了什么是插件，在webpack中如何使用插件，每一个插件的详细使用方法其实都可以单独写一篇文章了。

下一篇文章我们将处理样式相关的资源文件，这样就牵扯到webpack的loader了，下一篇见！