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 /* 主动开启浏览器 */
}