Webpack.devServer 配置項如何使用?附devServer完整示例

来源:https://www.cnblogs.com/azoux/archive/2023/11/19/17840835.html
-Advertisement-
Play Games

前言: 我們在平常本地開發時,可能經常需要與後端進行聯調,或者調用一些api,但是由於瀏覽器跨域的限制、開發與生產環境的差異、http與https等問題經常讓聯調的過程不夠順暢。所以本文介紹一下webpack的devServer中的proxy配置項。接下來讓我們先看一下這個配置項的基本使用: 基本使 ...


前言: 我們在平常本地開發時,可能經常需要與後端進行聯調,或者調用一些api,但是由於瀏覽器跨域的限制、開發與生產環境的差異、http與https等問題經常讓聯調的過程不夠順暢。所以本文介紹一下webpack的devServer中的proxy配置項。接下來讓我們先看一下這個配置項的基本使用:


基本使用

  1. 基本代理配置:如果你有一個在localhost:3000上的後端,你可以通過簡單的配置將/api路由代理到這個後端伺服器。webpack會對所有本地發出的首碼為/api的請求,轉發到localhost:3000
   proxy: {
     '/api': 'http://localhost:3000',
   }
  // 示例
  // 假設你本地的前端服務跑在8080埠
  axios.get('/api/user/info') // 會被轉發到 -> localhost:3000/api/user/info
  axios.get('/user/info') // 不會被轉發, localhost:8080/user/info
  1. 路徑重寫:如果你不希望在代理請求時傳遞原始路徑(例如/api),可以使用pathRewrite來重寫它。這裡的^/api: ''的意思是匹配介面路徑中的/api,並將其替換為空字元串
  • 在這個例子中,任何以 /api 開頭的請求路徑在轉發之前都會將 /api 部分替換為空字元串。例如,如果你發起一個請求到 /api/users,那麼實際發送到後端伺服器的請求路徑將是 /users。
  • ^:匹配字元串的開始部分。
  • target 是後端的地址
  • 最後的請求路徑會是:http://localhost:3000/users
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
      },
    }
    
  1. 處理HTTPS和無效證書:預設情況下,代理不會接受運行在HTTPS上且證書無效的後端伺服器。要允許這樣的配置,可以將secure選項設置為false

    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false,
      },
    }
    
  2. 條件代理:通過一個函數判斷是否需要代理。例如,對於瀏覽器請求,你可能希望提供一個HTML頁面,而對於API請求,則希望代理它。

    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        bypass: function (req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        },
      },
    }
    
  3. 多路徑代理:如果你想將多個特定路徑代理到同一個目標,可以使用具有context屬性的對象數組。

    proxy: [
      {
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
      },
    ]
    
  4. 改變原始主機頭:代理預設保持原始的主機頭。如果需要,可以通過設置changeOrigintrue來改變這個行為。

    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    }
    

devServer配置示例

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 入口文件配置
    entry: './src/index.js',

    // 輸出文件配置
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    // 開發伺服器配置
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        proxy: {
            // 配置代理規則 '/api'
            '/api': {
                target: 'http://localhost:3000', // 目標伺服器地址
                pathRewrite: { '^/api': '' }, // 路徑重寫,將 '/api' 替換為 ''
                secure: false, // 如果是 https 介面,需要配置為 true
                changeOrigin: true // 需要虛擬托管站點
            },
            // 你可以在這裡繼續添加更多的代理規則
        }
    },

    // 插件配置
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],

    // 模塊配置
    module: {
        rules: [
            // 在這裡添加 loader
        ]
    }
};

在這個配置中:

  1. entryoutput 分別配置了入口和輸出文件。

  2. devServer 是開發伺服器的配置:

    • contentBase 指定了靜態文件的位置。
    • compress 開啟 gzip 壓縮。
    • port 設置開發伺服器的埠為 9000。
  3. devServer.proxy 是重要的代理配置部分:

    • 針對任何以 /api 開始的請求,代理規則會將請求轉發到 http://localhost:3000 上。
    • pathRewrite 將路徑中的 /api 替換為空字元串,這意味著例如 /api/user 會被轉發為 http://localhost:3000/user
    • secure: false 表示接受對 https 的代理,這在目標伺服器使用自簽名證書時很有用。
    • changeOrigin: true 用於控制 Host 頭的值。如果為 trueHost 頭會被修改為目標 URL 的主機名。
  4. pluginsmodule 分別用於配置 Webpack 插件和模塊載入器。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • DX後臺截圖C++實現代碼 文章僅發佈於https://www.cnblogs.com/Icys/p/DXGI.html和知乎上。 傳統的GDI API (BitBlt)雖然可以完美的完成後臺截圖的任務,但是歸根結底效率還是太低。 直接使用DXGI方法截圖只能完成前臺視窗的截圖,而DX HOOK的截 ...
  • 目錄前言一、使用的元器件二、模擬圖三、項目分析四、代碼編寫總結 前言 這個項目主要針對於選擇的人們作息不規律而設計的一個項目,這個項目是使用stm32f103系列的晶元來製作的(R6和C8)都可以使用。 一、使用的元器件 DS1302時鐘晶元 STM32F103R6 按鍵 LCD1602顯示屏 蜂鳴 ...
  • 命令行交互 命令行交互一般是學習資料庫的第一步,不過這些命令在後續用的比較少,瞭解即可。 角色命令 創建角色 use admin db.createUser({"user": "root", "pwd": passwordPrompt(), "roles": [{role:"role",db:"<d ...
  • SQL INSERT INTO 語句用於在表中插入新記錄。 INSERT INTO 語法 可以以兩種方式編寫INSERT INTO語句: 指定要插入的列名和值: INSERT INTO 表名 (列1, 列2, 列3, ...) VALUES (值1, 值2, 值3, ...); 如果要為表的所有列添 ...
  • AND 運算符 SQL的AND運算符用於根據多個條件篩選記錄,確保所有條件都為TRUE才返回記錄。下麵是AND運算符的基本語法: SELECT column1, column2, ... FROM table_name WHERE condition1 AND condition2 AND cond ...
  • DM8壓縮表 0、結論 行表(普通表)不支持壓縮。但是語法支持。建表之後,查詢到的占用空間會比普通表小一半。 經過測試,裝10萬數據(兩個欄位),壓縮的、未壓縮,占用空間一樣大。 列表(huge表)支持壓縮。可以壓縮表(就是壓縮所有列),也可以選擇壓縮列。但是建表的時候就要設置,否則建好表之後修改不 ...
  • 前面多文介紹了Dart編程語言的基本語法和語言特性。從本文開始,我們通過一個Flutter App的編碼過程,完成Flutter的學習,包括Flutter基礎知識,Flutter App啟動頁,Tab頁,個人設置頁,SQLite資料庫,HTTP API調用,到最後Flutter App打包等…… ...
  • 在Vue3中使用Element-Plus分頁(Pagination )組件 開發過程中數據展示會經常使用到,同時分頁功能也會添加到頁面中。 記:在Vue3中使用Element-Plus分頁組件與表格數據實現分頁交互。 開始實現 引入表格和分頁組件的H5標簽。 <strong>Element-Plus ...
一周排行
    -Advertisement-
    Play Games
  • 前言 插件化的需求主要源於對軟體架構靈活性的追求,特別是在開發大型、複雜或需要不斷更新的軟體系統時,插件化可以提高軟體系統的可擴展性、可定製性、隔離性、安全性、可維護性、模塊化、易於升級和更新以及支持第三方開發等方面的能力,從而滿足不斷變化的業務需求和技術挑戰。 一、插件化探索 在WPF中我們想要開 ...
  • 歡迎ReaLTaiizor是一個用戶友好的、以設計為中心的.NET WinForms項目控制項庫,包含廣泛的組件。您可以使用不同的主題選項對項目進行個性化設置,並自定義用戶控制項,以使您的應用程式更加專業。 項目地址:https://github.com/Taiizor/ReaLTaiizor 步驟1: ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • Channel 是乾什麼的 The System.Threading.Channels namespace provides a set of synchronization data structures for passing data between producers and consume ...
  • efcore如何優雅的實現按年分庫按月分表 介紹 本文ShardinfCore版本 本期主角: ShardingCore 一款ef-core下高性能、輕量級針對分表分庫讀寫分離的解決方案,具有零依賴、零學習成本、零業務代碼入侵適配 距離上次發文.net相關的已經有很久了,期間一直在從事java相關的 ...
  • 前言 Spacesniffer 是一個免費的文件掃描工具,通過使用樹狀圖可視化佈局,可以立即瞭解大文件夾的位置,幫助用戶處理找到這些文件夾 當前系統C盤空間 清理後系統C盤空間 下載 Spacesniffer 下載地址:https://spacesniffer.en.softonic.com/dow ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 一、ReZero簡介 ReZero是一款.NET中間件 : 全網唯一開源界面操作就能生成API , 可以集成到任何.NET6+ API項目,無破壞性,也可讓非.NET用戶使用exe文件 免費開源:MIT最寬鬆協議 , 一直從事開源事業十年,一直堅持開源 1.1 純ReZero開發 適合.Net Co ...
  • 一:背景 1. 講故事 停了一個月沒有更新文章了,主要是忙於寫 C#內功修煉系列的PPT,現在基本上接近尾聲,可以回頭繼續更新這段時間分析dump的一些事故報告,有朋友微信上找到我,說他們的系統出現了大量的http超時,程式不響應處理了,讓我幫忙看下怎麼回事,dump也抓到了。 二:WinDbg分析 ...
  • 開始做項目管理了(本人3年java,來到這邊之後真沒想到...),天天開會溝通整理需求,他們講話的時候忙裡偷閑整理一下常用的方法,其實語言還是有共通性的,基本上看到方法名就大概能猜出來用法。出去打水的時候看到外面太陽好好,真想在外面坐著曬太陽,回來的時候好兄弟三年前送給我的鍵盤D鍵不靈了,在打"等待 ...