配置html-webpack-plugin

html-webpack-plugin的作用

1.能够根据一个html，在根目录生成另一个html
2.自动引入根目录在内存中生成功的index.js

步骤

1.安装默认预览功能的包:html-webpack-plugin

  npm install html-webpack-plugin -D

2.修改webpack.config.js文件，如下：

 //导入包
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    //创建对象
    const htmlPlugin = new HtmlWebpackPlugin({
        //设置生成预览页面的模板文件
        template:"./src/index.html",
        //设置生成的预览页面名称
        filename:"index.html"
    })

3.继续修改webpack.config.js文件，添加plugins信息：

  module.exports = {
        ......
        plugins:[ htmlPlugin ]
    }