ホームページ >ウェブフロントエンド >jsチュートリアル >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 サイトの他の関連記事を参照してください。