webpack5学习笔记-06 webpack使用（4）webpack-dev-server和跨域处理

webpack-dev-server是一款基于Node在客户端本地启动一个web服务，帮助开发者实时预览开发的作品的一个工具。它对项目进行打包后，打包的内容没有存放在dist目录下，而是放在了虚拟内存中。它存在着热更新的机制，当项目中的代码发生变化时，会实时打包编译，自动刷新浏览器。同时，它也可以作为数据跨域请求的代理服务器，实现Proxy跨域处理。

安装webpack-dev-server：

$ npm install webpack-dev-server --save-d
OR
$ yarn add webpack-dev-server -D

webpack-dev-server的使用：

打开webpack.config.js文件，添加下面代码：

devServer: {
        host: '127.0.0.1',
        port: 3000,
        open: true,
        hot: true,
        compress: true,
        proxy: {
            "/jian": {
                target: "https://www.jianshu.com/asimov",
                changeOrigin: true,
                ws: true,  //支持websocket通信机制
                pathRewrite: { "^/jian": "" } //把"/jian"去掉
            },
            "/zhi": {
                target: "https://news-at.zhihu.com/api/4",
                changeOrigin: true,
                ws: true,
                pathRewrite: { "^/zhi": "" }
            }
        }
    },

这里模拟的是向简书和知乎发送数据请求的实例。 在index.js中，再用fetch或者axios发送HTTP请求，即可获取到数据。
这里使用fetch方法：

fetch("/jian/subscriptions/recommended_collections")
    .then(response => response.json())
    .then(value => {
        console.log('简书：', value);
    });
fetch("/zhi/news/latest")
    .then(response => response.json())
    .then(value => {
        console.log('知乎', value);
    }); 

同时也需要在script标签中添加webpack server的相关命令配置然后启动本地web服务 在浏览器控制台上就可以看到数据了。