webpack4使用html-webpack-plugin插件

安装依赖

npm i webpack webpack-cli html-webpack-plugin -D

webpack.config.js配置文件

const path = require('path')
//导入htm-webpack-plugin插件
const htmlWebpackPlugin = require('html-webpack-plugin');
//这个配置文件初始就是一个js文件，通过node中的模块操作
module.exports = {    
//入口，表示要使用webpack打包哪个文件    
	entry: path.join(__dirname, './src/main.js'),    
	output: {    //输出文件相关的配置        
	   path: path.join(__dirname, './dist'),//指定打包的文件输出到哪个目录        
	   filename: 'bundle.js'  //指定输出的文件名称    
	},    
	mode: 'development',
	devServer: {     //配置dev-server命令参数的配置项
	    open: true, //自动打开浏览器        
	    port: 3000,  //设置启动的端口号        
            contentBase: 'src',//设置默认目录        
            hot: true  //启动热更新    
	}, 
	plugins: [//插件数组        
	    new htmlWebpackPlugin({ //创建一个在内存中生成html页面插件的配置对象            
	        template:path.join(__dirname,'./src/index.html'),    //指定模版页面生成内存中的hmtl            
	        filename:'index.html'   //指定生成的页面名称       
 	    })    
         ]
}