Webpack4 学习笔记七 跨域服务代理
- webpack 小插件使用
- webpack 监听文件变化配置
- webpack 处理跨域问题
Webpack 小插件使用
- clean-webpack-plugin: 用于在生成之前删除生成文件夹的Webpack插件
- copy-webpack-plugin: 将单个文件或整个目录复制到生成目录
- webpack.BannerPlugin内置插件: 给输出的文件头部插入注释信息
安装:
npm i clean-webpack-plugin copy-webpack-plugin --save-dev
webpack配置:
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin('./dist'), // 也就是 output.path对应的目录, 相对路径
new CopyWebpackPlugin([
{
from: './doc', // 从哪个文件夹copy内容
to: './' // copy到哪里, 默认为输出目录
}
]),
new webpack.BannerPlugin('⌚author: qiqingfu'), // 会将这段内容插入到打包后的js文件最前面
]
}
webpack 监听文件变化配置
webpack 可以监听文件变化, 当它们重新修改后会重新编译。
启用 watch
模式, 它是一个 boolean类型的值, 默认为 false。当设置为 true, webpack将监听任何已解析文件的更改。
也可以使用 watchOptions
来配置watch模式的选项。
module.exports = {
// watch: true, 开启监听文件变化
watchOptions: {
aggregateTimeout: 1000, // 节流, 你这个文件修改后的一秒后,再进行构建
poll: 1000, // 每秒检查一次变动
ignored: /node_modules/ // 排除node_modules,监听大量文件系统会占用更多的CPU和内容消耗
}
}
webpack 处理跨域问题
所谓同源是指,域名,协议,端口相同。任何一者不同都会产生跨域。
假如:
前端服务为 http: //localhost:8080
后端的连调服务器为: http://192.163.21.1:8082
前端请求后端提供的接口, 由于域名
和端口
不同。所产生跨域的现象。
除了别的解决跨域的方式以外, 在webpack中也可以解决跨域的问题。
webpack.proxy 启用代理服务器。
webpack 中的钩子函数中自己mock数据
在服务端启用 webpack
webpack.proxy 启用代理服务器
后端服务: http://localhost:3000
const express = require('express')
const app = express()
app.get('/qy/user', (req, res) => {
console.log(req.url)
res.json({
name: 'qiqingfu',
age: 21,
job: 'web',
city: 'QingDao'
})
})
app.listen(3000,'localhost', () => {
console.warn('port open success: 3000')
})
前端请求:
xhr.open('GET', '/api/qy/user', true)
xhr.onload = function () {
console.log(xhr.response)
}
xhr.send()
webpack配置proxy代理
devServer: {
contentBase: './dist',
progress: true,
compress: true,
port: 8080,
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {"^/api": ""} // 将/api重写为""空字符串
}
}
}
凡是接口以 /api
开头的请求,都将其代理到后端的服务器上。http://localhost:3000
。
pathRewrite: {"^/api": ""}, 再将 /api
重写掉。什么意思呢? 因为后端的接口为 /qy/user
,我们用 /api开头只是为了统一管理, 如果不把/api重写掉,那发给后端的请求是 /api/qy/user
,和后端的接口不匹配。会出问题的。
通过 webpack.devServer 的钩子函数, mock数据
webpack配置
before: 提供在服务器内部所有其他中间件之前执行自定义中间件的能力
devServer: {
contentBase: './dist',
progress: true,
compress: true,
port: 8080,
before: app => {
app.get('/api/qy/user', (req, res) => {
res.json({name: 'mock'})
})
}
}
在服务端启用 webpack
需要weebpack插件: webpack-dev-middleware
server端配置:
const express = require('express')
const app = express()
const middle = require('webpack-dev-middleware')
const webpack = require('webpack')
const config = require('./webpack.config')
const comiler = webpack(config)
app.use(middle(comiler))
app.get('/qy/user', (req, res) => {
res.json({
name: 'qiqingfu',
age: 21,
job: 'web',
city: 'QingDao'
})
})
app.listen(3000,'localhost', () => {
console.warn('port open success: 3000')
})
然后启动服务的时候会后续启动 webpack, 直接访问 http://localhost:3000
, 可直接访问到数据
笔记地址
Webpack4 学习笔记七 跨域服务代理的更多相关文章
- 跨域学习笔记2--WebApi 跨域问题解决方案:CORS
自己并不懂,在此先记录下来,留待以后学习... 正文 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨 ...
- HTML5学习笔记:跨域
在跨域安全性方面,有多个地方会有限制,主要是XMLHttpRequest对象的跨域限制和iFrame的跨域限制,下面我们分别来看一下. Ajax跨域(CORS) CORS是一个W3C标准,全称是&qu ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
- go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer)
目录 go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer) demo demo server demo client 池 dao service p2c ro ...
- vue-cli 3.0之跨域请求代理配置及axios路径配置
vue-cli 3.0之跨域请求代理配置及axios路径配置 问题:在前后端分离的跨域请求中,报跨域问题 配置: vue.config.js: module.exports = { runtimeCo ...
- Java IO学习笔记七:多路复用从单线程到多线程
作者:Grey 原文地址:Java IO学习笔记七:多路复用从单线程到多线程 在前面提到的多路复用的服务端代码中, 我们在处理读数据的同时,也处理了写事件: public void readHandl ...
- (转)Qt Model/View 学习笔记 (七)——Delegate类
Qt Model/View 学习笔记 (七) Delegate 类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
- 基于 HTTP 请求拦截,快速解决跨域和代理 Mock
近几年,随着 Web 开发逐渐成熟,前后端分离的架构设计越来越被众多开发者认可,使得前端和后端可以专注各自的职能,降低沟通成本,提高开发效率. 在前后端分离的开发模式下,前端和后端工程师得以并行工作. ...
随机推荐
- 互联网轻量级框架SSM-查缺补漏第一天
简言:工欲其事必先利其器,作为一个大四的准毕业生,在实习期准备抽空补一下基础.SSM框架作为互联网的主流框架,在会使用的基础上还要了解其原理,我觉得会对未来的职场会有帮助的.我特意的买了一本<J ...
- PAT 1021 Deepest Root
#include <cstdio> #include <cstdlib> #include <vector> using namespace std; class ...
- Python pip windows安装
参考页面: [1] : https://pip.pypa.io/en/latest/installing.html [2] : http://stackoverflow.com/questions/4 ...
- 集合之equals与hashCode方法
一 equals equals方法是Object级的,默认对比两个对象的内存地址,很多类都重写了该方法,对比对象的实际内容,一般对比同一类对象相同属性的属性值是否相同. 二 hashCode 1.哈 ...
- mui 窗体切换
手机实现窗体切换 1.在5+环境下(即H5app) 先初始化: mui.init({ subpages:[{ url:"page1.html",//子页面HTML地址,支持本地地址 ...
- 【Linux】Linux 找回Root用户密码
Root密码破解 Linux 忘记Root密码 ? 技术学习基本原则:不作恶 一.破解步骤 1.在系统启动时进入grub选项菜单 2.在grub选项菜单按e进入编辑模式 3.编辑kernel那行添加/ ...
- python 日期排序
转自:http://www.cnblogs.com/lkprof/p/3179850.html,感谢分享~ 问题1:如果日期中有千年以前的情况(没法用格式化函数),如('2010-11-23','19 ...
- PHP 运用rsa加密和解密实例
1.加密解密的第一步是生成公钥.私钥对,私钥加密的内容能通过公钥解密(反过来亦可以) 下载开源RSA密钥生成工具openssl(通常Linux系统都自带该程序),解压缩至独立的文件夹,进入其中的bin ...
- gamemakerstudio:room_speed和image_speed
room_speed是游戏步数,每秒多少步(步事件)image_speed是动画帧率room_speed变则整个游戏变慢image_speed变只是该object动画变慢 除了游戏全局加速减速,一般不 ...
- winform中 让 程序 自己重启
private void button1_Click(object sender, EventArgs e) { Application.ExitThread(); ...