这次给大家带来如何使用webpack设置反向代理，使用webpack设置反向代理的注意事项有哪些，下面就是实战案例，一起来看一下。
一、设置代理的原因
现在对前端开发的要求越来越高，并且随着自动化以及模块化的诞生，前后端开发模式越来越流行。后端只负责接口，前端负责数据展示、逻辑处理。但是前后端开发模式，有一个重要的问题，就是跨域问题。
二、如何配置webpack的代理
webpack代理需要另外一个插件：webpack-dev-server
webpack-dev-server配置代理非常的方便，只需要条件一个proxy属性，然后配置相关的参数就可以了：
var webpack = require('webpack');var webpackdevserver = require(webpack-dev-server);var path = require('path');var current_path = path.resolve(__dirname); // 获取到当前目录var root_path = path.join(__dirname, '../'); // 项目根目录var modules_path = path.join(root_path, './node_modules'); // node包目录var build_path = path.join(root_path, './dist'); // 最后输出放置公共资源的目录var htmlwebpackplugin = require('html-webpack-plugin');var extracttextplugin = require(extract-text-webpack-plugin);var copywebpackplugin = require('copy-webpack-plugin');module.exports = {  //项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字  entry: {    app: ['./src/js/index.js'],    vendors: ['jquery', 'moment'], //需要打包的第三方插件    // login:['./src/css/login.less']  },  //输出的文件名,合并以后的js会命名为bundle.js  output: {    path: path.join(__dirname, dist/),    publicpath: http://localhost:8088/dist/,    filename: bundle_[name].js  },  devserver: {    historyapifallback: true,    contentbase: ./,    quiet: false, //控制台中不输出打包的信息    noinfo: false,    hot: true, //开启热点    inline: true, //开启页面自动刷新    lazy: false, //不启动懒加载    progress: true, //显示打包的进度    watchoptions: {      aggregatetimeout: 300    },    port: '8088', //设置端口号    //其实很简单的，只要配置这个参数就可以了    proxy: {      '/index.php': {        target: 'http://localhost:80/index.php',        secure: false      }    }  } ..........};
上面实例中我们把本地的端口号设置为了：8088，如果这个时候接口放在了端口为80的服务器上，并且我们请求的接口url如下：http://localhost:80/index.php
这个时候只需要在proxy使用正则表达式匹配/index.php,然后 匹配到 转向target设置的目标接口；这个时候使用ajax请求接口就不要写上目标接口的域名，只需要写上index.php就可以了。
$.ajax({    type: 'get',    url: '/index.php',    data: {},    datatype: 'json',    beforesend: function () {    },    success: function (data) {    },    error: function (error) {    }  });
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样对json对象排序并删除相同id数据
怎样在实战项目中进行mvvm-simple双向绑定
以上就是如何使用webpack设置反向代理的详细内容。