6. devServer自动打包和自动刷新页面

• https://webpack.docschina.org/configuration/dev-server/
• 特点：只会在内存中编译打包，不会有任何输出

1. 下载webpack-dev-serve

   npm i webpack-dev-server -D
   

2. 在webpack配置文件webpack.config.js中进行配置
   被注释掉的代码不是必须的，根据需求去掉注释

   devServer:{
     //项目构建后的路径
      contentBase: path.resolve(__dirname, 'build'),
      //监视contentBase目录下的所有文件，一旦文件变化就会reload
      //watchContentBase:true,
      /*watchOptions: {
      	//忽略文件,不监视node_modules
      	ignored: /node_modules/
      },*/
      //启动gzip压缩
      compress: true,
      //设置域名
      //host:'localhost',
      //设置端口号
      port:5000,
      //自动打开浏览器
      open:true,
      //开启HMR功能
      //host: true,
      //不要显示启动服务器日志信息
      //clientLogLevel: 'none',
      //除了一些基本启动信息以外，其他内容都不要显示
      //quiet: true,
      //如果出现错误，不要全屏提示
      //overlay: false,
      //服务器代理，解决开发环境跨域问题
      /*proxy:{
      		//一旦devServer(5000)服务器接受到/api/xxx 的请求，就会包请求转发到另外一个服务器(3000)
   		'/api':{
   			target: 'http://localhost:3000',
   			pathRewrite:{
   				//发送请求时,请求路径重写；将api/xxx改为/xxx(去掉/api)
   				'^/api': ''
   			}
   		}
      }*/
   }
   

3. 运行devServe

   npx webpack-dev-server