So richten Sie einen Reverse-Proxy mit Webpack ein

Dieses Mal zeige ich Ihnen, wie Sie Webpack zum Einrichten eines Reverse-Proxys verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Webpack zum Einrichten eines Reverse-Proxys gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1. Gründe für die Einrichtung eines Proxys

Heutzutage werden die Anforderungen an die Frontend-Entwicklung immer höher und mit der Als Geburtsstunde der Automatisierung und Modularisierung erfreut sich das Front-End- und Back-End-Entwicklungsmodell immer größerer Beliebtheit. Das Backend ist nur für die Schnittstelle verantwortlich und das Frontend ist für die Datenanzeige und logische Verarbeitung verantwortlich. Es gibt jedoch ein wichtiges Problem im Front-End- und Back-End-Entwicklungsmodell, nämlich das domänenübergreifende Problem.

2. So konfigurieren Sie den Webpack-Proxy

Der Webpack-Proxy erfordert ein weiteres Plug-in: webpack-dev-server

webpack -dev-server ist sehr praktisch, um den Proxy zu konfigurieren. Sie müssen nur ein Proxy-Attribut konditionieren und dann die relevanten Parameter konfigurieren:

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

Im obigen Beispiel setzen wir die lokale Portnummer auf: 8088. Wenn zu diesem Zeitpunkt die Schnittstelle auf dem Server mit Port 80 platziert ist und die von uns angeforderte Schnittstellen-URL wie folgt lautet: http://localhost:80/index.php

Zu diesem Zeitpunkt nur Sie müssen im Proxy den regulären Ausdruck /index verwenden und dann die vom Umleitungsziel festgelegte Zielschnittstelle abgleichen. Schreiben Sie nicht den Domänennamen der Zielschnittstelle, sondern schreiben Sie einfach index.php.

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So sortieren Sie JSON-Objekte und löschen Daten mit derselben ID

So führen Sie mvvm aus Aktuelle Projekte – einfache Zwei-Wege-Bindung

Das obige ist der detaillierte Inhalt vonSo richten Sie einen Reverse-Proxy mit Webpack ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!