url三部分不同就跨域(协议 域名 端口)
通过proxy解决 (打包后就没有了)
前端地址:http://localhost:8080/user
后端:http://localhost:3000/user
1、测试后端借口是否OK
2、前端如何代理后端
前端地址:http://localhost:8080/aip/user
后端:http://localhost:3000/user
将api替换为‘’ pathRewrite:{'/api':''}
proxy:{
"app":{
target:'http://localhost:3000/'
}
}
启动前端服务
npm run dev
使用ng代理
将前后端一起打包 webpack-dev-middleware
启动node server.js
let webpack=require("webpack")
let middle=require('webpack-dev-middleware')
let config=require("./webpack.config")
let compiler=webpack(config)
app.use(middle(compiler))
多环境配置
开发 http://120.168.5.6:8080
测试 http://120.168.5.6:8081
上线 http://120.168.5.6:8082
webpack.base.js 共同的放入
webpack.dev.js 不同
webpack.prod.js 不同
继承父配置文件 webpack-merge 安装版本4
let {smart}=require('webpack-merge')
let base=require('./webpack.base.js')
let webpack=require('webpack')
module.exports=smart(base,{
mode:"development",
plugins:[
new webpack.DefinePlugin({
DEV_ENV:"'dev'"
})
]
})
父类重复的删除
热加载
默认是刷新整个页面‘
devServer:{
host:false
},
plugins:[
new webpack.HashedModuleIdsPlugin()
]
局部热加载
if(module.hot){
module.hot.accept('./sub',()=>{
console.log("sub文件更新了")
})
}