2. html 플러그인 및 웹팩-dev-server 설정

npm i webpack-dev-server -D

npx webpack-dev-server

```
//webpack  node       node   
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	devServer:{ //       
		port:3000,//     
		progress:true,//          
		contentBase:'./dist',//                 
		/*
			  './dist'        ，        ，               
			      ：'html-webpack-plugin'
				    :
					1. npm i html-webpack-plugin -D
					2.  webpack.config.js require    
					3.   plugins  ,   
				  ：     js     html (DOM )，       dist    

		*/
		open:true,//       
		compress:true,//           gzip  ,
		/*
		      gzip        ：
				  ： JS，CSS        ，              ，    web  
				  ：           ，         ，        
		*/

	},
	mode:'development',//  ，     ： production development
	entry:'./src/index.js',  //  
	output:{
		filename:'bundle.[hash:8].js', //       ,:8     8  hash
		path:path.resolve(__dirname,'./dist'),//              。  ：           
	},
	plugins:[//        webpack  
		new HtmlWebpackPlugin({
			template:'./src/index.html',//           html 
			filename:'index.html',//         html  
			minify:{
				removeAttributeQuotes:true,//        
				collapseWhitespace:true,//      ，        
			},
			hash:true,//    js  ，  hash ，      ,       js  ?asdfbhde     （  ，       js hash，     hash，        ，          ，  ：bundle.ab24e2bd.js?ab24e2bd1cf2c8ab6a33）
		})
	]

}
```