devServer给我们提供了开发过程中的服务器,是一个使用了express的Http服务器,它的作用主要是为了监听资源文件的改变,该http服务器和client使用了websocket通信协议,只要资源文件发生改变,webpack-dev-server就会实时的进行编译打包,有利于提升开发效率,且只会在内存中编译,不会有任何输出。
-
下载webpack-dev-server包
npm i webpack-dev-server -D
webpack-dev-server并不能读取你的webpack.config.js的配置output -
启动devServer指令为:
npx webpack serve 本目录执行
文件一有改动,则自动编译打包 -
webpack5无法刷新网页,解决:webpack.config.js添加配置:target: ‘web’
-
自定义网页端口(默认8080)
webpack serve --port 3003
也可以在package.json 设置scripts
也可以在webpack.config.js里设置devServer配置项
// 在webpack5需要加上这个配置项才能自动刷新
target: "web",
devServer: {
contentBase: resolve(__dirname, "build"),
//启动gzip压缩
compress: true,
//设置服务器端口号
port: 3000,
//自动打开浏览器
open: true
}
- 其他配置
–content-base //设定webpack-dev-server的director根目录。如果不进行设定的话,默认是在当前目录下。
–quiet: //控制台中不输出打包的信息,开发中一般设置为false,进行 打印,这样查看错误比较方面
–no-info: // 不显示任何信息
–colors: //对信息进行颜色输出
–no-colors: //对信息不进行颜色输出
–compress: //开启gzip压缩
–host <hostname/ip>: //设置ip
–port : //设置端口号,默认是:8080
–inline: //webpack-dev-server会在你的webpack.config.js的入口配置文件中再添加一个入口,
–hot: //开发热替换
–open: //启动命令,自动打开浏览器
–history-api-fallback: //查看历史url