使用html-webpack-plugin

1. 安装 html-webpack-plugin
   npm i html-webpack-plugin -D
   2.修改webpack.config.json文件

// 导入在内存中生成的HTML插件  只要是插件都一定要放在plugin插件中去
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports ={

...

plugins: [
        new htmlWebpackPlugin({   //创建一个在内存中生成html插件

            template: path.join(__dirname, '/src/index.html'),  // 指定模板页面, 将来会根据指定的页面路径, 去生成内存中的页面
            filename: 'index.html'  // 指定生成内存中的页面
        })
    ]
}
...

全部的页面代码

const path = require('path');

// 导入在内存中生成的HTML插件  只要是插件都一定要放在plugin插件中去
const htmlWebpackPlugin = require('html-webpack-plugin');



// 这个配置文件, 其实就是一个js文件, 通过node 中的模块操作, 向外暴露了一个配置对象

module.exports = {

    // 在配置文件中, 需要手动的指定入口和出口
    entry: path.join(__dirname, './src/main.js'),  // 入口, 表示webpack要打包那个文件
    output: {
        path: path.join(__dirname, './dist'), // 指定打包好的文件, 放在那个目录中去
        filename: 'bundle.js', // 这里是指输出的文件名称
},
    mode: 'production',
    plugins: [
        new htmlWebpackPlugin({   //创建一个在内存中生成html插件

            template: path.join(__dirname, './src/index.html'),  // 指定模板页面, 将来会根据指定的页面路径, 去生成内存中的页面
            filename: 'index.html'  // 指定生成内存中的页面
        })
    ]

};