How to set up a reverse proxy using webpack

This time I will show you how to use webpack to set up a reverse proxy, and what are the precautions for using webpack to set up a reverse proxy. The following is a practical case, let's take a look.

1. Reasons for setting up a proxy

Now the requirements for front-end development are getting higher and higher, and with the birth of automation and modularization , the front-end and back-end development model is becoming more and more popular. The backend is only responsible for the interface, and the frontend is responsible for data display and logical processing. However, there is an important issue in the front-end and back-end development model, which is the cross-domain issue.

2. How to configure the webpack agent

The webpack agent requires another plug-in: webpack-dev-server

webpack -dev-server is very convenient to configure the proxy. You only need to condition a proxy attribute and then configure the relevant parameters:

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
      }
    }
  } 
..........
};

In the above example, we set the local port number to: 8088. If at this time The interface is placed on the server with port 80, and the interface URL we request is as follows: http://localhost:80/index.php

At this time, we only need to use regular expression matching /index in the proxy. php, and then match the target interface set by the redirect target; when using the ajax request interface, do not write the domain name of the target interface, just write index.php.

 $.ajax({
    type: 'GET',
    url: '/index.php',
    data: {},
    dataType: 'json',
    beforeSend: function () {
    },
    success: function (data) {
    },
    error: function (error) {
    }
  });

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to sort json objects and delete data with the same id

How to perform mvvm in actual projects -simple two-way binding

The above is the detailed content of How to set up a reverse proxy using webpack. For more information, please follow other related articles on the PHP Chinese website!