Webpackを使用してリバースプロキシを設定する方法

今回は、webpack を使用してリバース プロキシを設定する方法と、webpack を使用してリバース プロキシを設定する際の注意点について説明します。以下は実際のケースです。

1. プロキシを設定する理由

現在、フロントエンド開発の要件はますます高くなり、自動化とモジュール化の誕生により、フロントエンドとバックエンドの開発モデルが誕生しています。ますます人気が高まっています。バックエンドはインターフェイスのみを担当し、フロントエンドはデータの表示と論理処理を担当します。ただし、フロントエンドとバックエンドの開発モデルには、クロスドメインの問題という重要な問題があります。

2. webpack プロキシの設定方法

webpack プロキシには別のプラグインが必要です: webpack-dev-server

webpack-dev-server プロキシを設定するだけで非常に便利です。プロキシ属性を条件付けし、関連するパラメータを設定します。 パラメータは十分です:

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

現時点では、正規表現を使用してプロキシ内の /index.php と一致させ、ターゲット インターフェイス セットと一致させるだけで済みます。リダイレクト先で; この時点で、ajax リクエスト インターフェイスを使用する場合は、ターゲット インターフェイスのドメイン名を記述せず、単にindex.php と記述します。

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

json オブジェクトを並べ替えて同じ ID を持つデータを削除する方法

実際のプロジェクトで mvvm-simple 双方向バインディングを実行する方法

以上がWebpackを使用してリバースプロキシを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。