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/",
      },
    },
  },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值