webpack5.X使用webpack-dev-server

一、安装使用

yarn add webpack-dev-server --dev

启动服务器

yarn webpack serve

因为webpack5.X与webpack-dev-server有些冲突，无法直接使用webpack-dev-server启动服务，只能通过这种方式去调用webpack-dev-server，并且这种方式不能使用 --open 自动打开浏览器，也有可能是我没找到正确打开方式，有兴趣的读者可以看官网介绍。

二、静态资源配置

webpack-dev-server的相关配置选项都是通过devServer对象属性来配置的，

devServer:{
   
        contentBase:"./images", 
        // 指定额外的静态资源路径,可以是一个字符串或者一个数组
        // 因为在开发阶段我们一般不会去打包public、images等静态资源目录,只有在上线前才会去将其打包,所以在这里配置一下，如果output中配置了publicPath属性，一定要注释掉publicPath，不然会加载不出图片等静态资源
    }

三、配置代理解决跨域问题

devServer:{
   
        ...,
        proxy:{
    // 通过proxy属性添加代理服务配置,其中 每一个属性就是一个代理规则的配置
            '/api' :{
   // 属性的名称就是要被代理的请求路径前缀,它的值就是为这个前缀匹配到的代理规则配置
                target:"https://api.github.com",
                // http://localhost:8080/api/users ==> https://api.github.com/api/users
                // 因为我们实际要请求的地址是https://api.github.com/api/users,所以我们需要通过重写的方式去掉/api
                pathRewrite:{
    // pathRewrite会以正则的方式去替换我们请求的路径
                    "^/api":""
                },
                // 因为代理服务器默认会以我们实际在浏览器中请求的主机名(例如我们的localhost:8080)作为代理请求的主机名
                // 也就是说，我们在浏览器端对代理过后的地址发起请求，这个请求背后还需要去请求到github服务器，请求的过程中会带一个主机名
                // 这个主机名默认会用我们在浏览器端发起请求的主机名，也就是localhost:8080
                // 而一般情况下，服务器内需要根据主机名判断这个主机名属于哪个网站，从而把这个请求指派到对应网站
                changeOrigin:true 
            }
        }
    }