跨域

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文件更新了")
    })
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容