提升开发效率的利器
每次改完代码都需要重新打包⼀次,打开浏览器,刷新⼀次,很麻烦,我们可以安装使⽤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/",
},
},
},