12-webpack开发服务器devServer配置

devServer给我们提供了开发过程中的服务器，是一个使用了express的Http服务器，它的作用主要是为了监听资源文件的改变，该http服务器和client使用了websocket通信协议，只要资源文件发生改变，webpack-dev-server就会实时的进行编译打包，有利于提升开发效率，且只会在内存中编译，不会有任何输出。

1. 下载webpack-dev-server包
   npm i webpack-dev-server -D
   webpack-dev-server并不能读取你的webpack.config.js的配置output

2. 启动devServer指令为:
   npx webpack serve 本目录执行
   文件一有改动，则自动编译打包

3. webpack5无法刷新网页，解决：webpack.config.js添加配置：target: ‘web’

4. 自定义网页端口(默认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
    }

5. 其他配置

–content-base //设定webpack-dev-server的director根目录。如果不进行设定的话，默认是在当前目录下。
–quiet: //控制台中不输出打包的信息，开发中一般设置为false，进行 打印，这样查看错误比较方面
–no-info: // 不显示任何信息
–colors: //对信息进行颜色输出
–no-colors: //对信息不进行颜色输出
–compress: //开启gzip压缩
–host : //设置ip
–port : //设置端口号，默认是:8080
–inline: //webpack-dev-server会在你的webpack.config.js的入口配置文件中再添加一个入口,
–hot: //开发热替换
–open: //启动命令，自动打开浏览器
–history-api-fallback: //查看历史url