html-webpack-plugin插件的使用

一、配置html-webpack-plugin生成预览页面

1.运行 npm install html-webpack-plugin -D命令，安装生成预览页面的插件
2.修改webpack.config.js文件头部区域，添加如下配置信息：

 const HtmlWebpackPlugin = require('html-webpack-plugin')
    const htmlPlguin = new HtmlWebpackPlugin({  //创建插件的实例对象
        template: './src/index.html',   //指定要用到的模板文件
        filename: 'index.html'   //指定生成的文件的名称，该文件存在于内存中，在目录中不显示
    })

3.修改webpack.config.js文件中向外暴露的配置对象，新增如下配置节点：

 module.exports = {
     plugins: [htmlPlguin] //plugins数组时webpack打包期间会用到的一些插件列表
 }

如果在配置过程中出现TypeError: Cannot read property ‘tap’ of undefined问题，可能是因为html-webpack-plugin版本5高，我的解决办法是使用命令 npm uninstall html-webpack-plugin，再使用npm install html-webpack-plugin@v4.5.1 --save-dev就解决啦！

二、配置自动打包相关的参数

package.json中的配置

   // --open 打包完成后自动打开浏览器页面
   // --host 配置IP地址 
   // --port 配置端口
    "scripts":{
        "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",
    }