当前位置: 首页 > Web前端 > vue.js

开发服务器devServer配置(webpack)

时间:2023-03-31 23:29:36 vue.js

devServer为我们提供了开发过程中的服务器。它是一个使用express的HTTP服务器。它的主要功能是监视资源文件的变化。http服务器和客户端使用websocket通信协议,只要资源文件发生变化,webpack-dev-server就会实时编译。需要下载webpack-dev-server包1,安装npmiwebpack-dev-server-D2,webpack5需要在webpack.config.js中添加target属性实现自动刷新module.exports={entry:'xxx',output:'xxx',module:{...},plugins:[],target:'web',mode:'xxx',}3.启动:在命令行输入webpackserve启动,或者在package.json中在scripts参数后指定命令"scripts":{"dev":"webpackserve--modedevelopment",/*执行npmrundev启动devServer,并设置打包模式为开发模式*/"bulid":"webpack--modeproduction"/*在生产模式下执行npmrunbulid打包*/}4.配置参数:在webpack.config.js中添加devSeverdevSever:{port:8080,/*指定端口号*/compress:true,/*启用自动压缩*/open:true/*自动打开浏览器*/}