跨域

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文件更新了")
    })
}

你可能感兴趣的:(跨域)