webpack4.0核心概念（九）———— WebpackDevServer 设置代理

提升开发效率的利器

每次改完代码都需要重新打包⼀次，打开浏览器，刷新⼀次，很麻烦,我们可以安装使⽤webpackdevserver来改善这块的体验

安装

npm install webpack-dev-server -D

配置

修改下package.json

"scripts": {
    "server": "webpack-dev-server"
},

在webpack.config.js配置：

devServer: {
    contentBase: "./dist", //输出目录
    open: true, //自动打开浏览器
    port: 8081
},

启动

npm run server

启动服务后，会发现dist⽬录没有了，这是因为devServer把打包后的模块不会放在dist⽬录下，⽽是放到内存中，从⽽提升速度

本地mock,解决跨域：

前后端分离

前端和后端是可以并⾏开发的，

前端会依赖后端的接⼝

先给接⼝⽂档，和接⼝联调⽇期的

我们前端就可以本地mock数据，不打断⾃⼰的开发节奏

项目根目录下创建 server.js

const express = require("express");//express需要安装

const app = express();

app.get("/api/info", (req, res) => {
  res.json({
    name: "老韩",
  });
});

app.listen("9092");

启动这个服务器文件

node server.js

设置代理

devServer: {
    contentBase: "./dist",
    open: true,
    port: 8081,
    proxy: {
      "/api": {//包含【/api】的请求url，代理到【http://localhost:9092/】这个服务器上
        target: "http://localhost:9092/",
      },
    },
  },