webpack4实战三--插件使用（html-webpack-plugin篇）

因为在打包时，webpack默认只会打包js，也就是说，咱们打包出来的dist文件夹中只有js文件而已，并没有html啥的其他文件。

当我们想查看打包后的js文件是否可以使用的话，我们需要将html文件拷贝到dist目录下，然后在html文件中使用script标签引用打包好的js文件，步骤很是麻烦。

那么可以怎么简化这些操作，自然是使用插件咯，标题白写的不成。

进入正题：

一、找到对应功能的插件

有一个插件可以实现自动添加script引用到html文件的操作，html-webpack-plugin

怎么找对应功能的插件啊，我看到有人这么说

只要是符合插件规范的插件都可以使用，官网上罗列的插件也只是一部分，每个人都可以根据自己的需要编写新的插件，所以也没有地方查看全部插件，有一个折衷的办法是在npm仓库列表里搜索webpack-plugin，一般生产用的插件都会取这种规范的名字并且发布到npm仓库上。

也就是说自己去npm的官网找咯，地址在这npm 

二、插件安装

找到插件自然是要进行安装才能使用这些插件的，它们本身又不是在node自带的

例如我们上面说到这个html-webpack-plugin插件，那么我们就要进行安装

npm i -D html-webpack-plugin

为什么使用-D而不是-S，这是因为我们在项目的生产模式中并不需要使用到这个插件，它只是我们在开发时需要用到而已。 

三、插件使用

插件的使用，emmm，感觉有点麻烦吧

要先在webpack.config.js中引用需要使用的插件，再到module.export中写入一个plugin属性，以数组形式使用插件，如下：

const path = require('path');
let HtmlWebpackPlugin=require("html-webpack-plugin");
module.exports = {
  mode: 'development',
  entry: './src/a.js',//入口文件
  output: {//打包出口配置
    path: path.resolve(__dirname, 'dist'),//打包出口的文件夹 这里为绝对路径
    // filename: 'foo.bundle.js',//打包后文件名称
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:"./src/index.html"
    })
  ]
};

在plugins中，我们使用new HtmlWebpackPlugin()实例化对象作为plugins数组的元素，在其实例化对象中，使用template属性指定html文件作为需要引入上面打包好的js文件的html模板

emmm，说的有点绕，简单说就是上面咱们不是写了打包的js文件是a.js么，打包完之后是main.js，使用这个html-webpack-plugin，在插件的实例化对象的template属性里指定html文件是哪一个，也就是将指定的html文件一并打包，并且在其中自动引用上面打包好的js文件

若想修改打包后的html的文件名，可以像下面这样写

new HtmlWebpackPlugin({
      template:"./src/index.html", //指定输出的文件模板
      filename:"main.html"  //指定输出dist的文件名
})

filename即可修改文件名 

四、插件的具体配置

这个你得看插件的官网怎么写