devServer为咱们提供了开发过程中的服务器,是一个应用了express的HTTP服务器,它的次要作用是为了监听资源文件的扭转,该http服务器和client应用了websocket通信协议,只有资源文件产生扭转,webpack-dev-server就会实时的进行编译。
需下载webpack-dev-server包
1、装置
npm i webpack-dev-server -D
2、webpack5需在webpack.config.js中增加target属性,实现主动刷新
module.exports = { entry: 'xxx', output: 'xxx', module: {...}, plugins: [], target: 'web', mode: 'xxx',}
3、启动:在命令行中输出webpack serve启动,也可在package.json中scripts参数后指定命令
"scripts":{ "dev": "webpack serve --mode development", /*执行npm run dev开启devServer,并设置打包模式为开发模式*/ "bulid": "webpack --mode production" /*执行npm run bulid以生产模式打包*/}
4、配置参数:在webpack.config.js中增加devSever
devSever: { port: 8080, /*指定端口号*/ compress: true,/*开启主动压缩*/ open: true /*主动开启浏览器*/}