如何使用webpack設定反向代理

這次帶給大家如何使用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) {
    }
  });

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼對json物件排序並刪除相同id資料

怎麼在實戰專案中進行mvvm -simple雙向綁定

#

以上是如何使用webpack設定反向代理的詳細內容。更多資訊請關注PHP中文網其他相關文章！