翼度科技»论坛 编程开发 JavaScript 查看内容

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

6

主题

6

帖子

18

积分

新手上路

Rank: 1

积分
18
前言: 我们在平常本地开发时,可能经常需要与后端进行联调,或者调用一些api,但是由于浏览器跨域的限制、开发与生产环境的差异、http与https等问题经常让联调的过程不够顺畅。所以本文介绍一下webpack的devServer中的proxy配置项。接下来让我们先看一下这个配置项的基本使用:
基本使用


  • 基本代理配置:如果你有一个在localhost:3000上的后端,你可以通过简单的配置将/api路由代理到这个后端服务器。webpack会对所有本地发出的前缀为/api的请求,转发到localhost:3000
  1.    proxy: {
  2.      '/api': 'http://localhost:3000',
  3.    }
  4.   // 示例
  5.   // 假设你本地的前端服务跑在8080端口
  6.   axios.get('/api/user/info') // 会被转发到 -> localhost:3000/api/user/info
  7.   axios.get('/user/info') // 不会被转发, localhost:8080/user/info
复制代码

  • 路径重写:如果你不希望在代理请求时传递原始路径(例如/api),可以使用pathRewrite来重写它。这里的^/api: ''的意思是匹配接口路径中的/api,并将其替换为空字符串


  • 在这个例子中,任何以 /api 开头的请求路径在转发之前都会将 /api 部分替换为空字符串。例如,如果你发起一个请求到 /api/users,那么实际发送到后端服务器的请求路径将是 /users。
  • ^:匹配字符串的开始部分。
  • target 是后端的地址
  • 最后的请求路径会是:http://localhost:3000/users
    1. proxy: {
    2.   '/api': {
    3.     target: 'http://localhost:3000',
    4.     pathRewrite: { '^/api': '' },
    5.   },
    6. }
    复制代码

  • 处理HTTPS和无效证书:默认情况下,代理不会接受运行在HTTPS上且证书无效的后端服务器。要允许这样的配置,可以将secure选项设置为false。
    1. proxy: {
    2.   '/api': {
    3.     target: 'https://other-server.example.com',
    4.     secure: false,
    5.   },
    6. }
    复制代码
  • 条件代理:通过一个函数判断是否需要代理。例如,对于浏览器请求,你可能希望提供一个HTML页面,而对于API请求,则希望代理它。
    1. proxy: {
    2.   '/api': {
    3.     target: 'http://localhost:3000',
    4.     bypass: function (req, res, proxyOptions) {
    5.       if (req.headers.accept.indexOf('html') !== -1) {
    6.         console.log('Skipping proxy for browser request.');
    7.         return '/index.html';
    8.       }
    9.     },
    10.   },
    11. }
    复制代码
  • 多路径代理:如果你想将多个特定路径代理到同一个目标,可以使用具有context属性的对象数组。
    1. proxy: [
    2.   {
    3.     context: ['/auth', '/api'],
    4.     target: 'http://localhost:3000',
    5.   },
    6. ]
    复制代码
  • 改变原始主机头:代理默认保持原始的主机头。如果需要,可以通过设置changeOrigin为true来改变这个行为。
    1. proxy: {
    2.   '/api': {
    3.     target: 'http://localhost:3000',
    4.     changeOrigin: true,
    5.   },
    6. }
    复制代码
devServer配置示例
  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. module.exports = {
  4.     // 入口文件配置
  5.     entry: './src/index.js',
  6.     // 输出文件配置
  7.     output: {
  8.         filename: 'bundle.js',
  9.         path: path.resolve(__dirname, 'dist')
  10.     },
  11.     // 开发服务器配置
  12.     devServer: {
  13.         contentBase: path.join(__dirname, 'dist'),
  14.         compress: true,
  15.         port: 9000,
  16.         proxy: {
  17.             // 配置代理规则 '/api'
  18.             '/api': {
  19.                 target: 'http://localhost:3000', // 目标服务器地址
  20.                 pathRewrite: { '^/api': '' }, // 路径重写,将 '/api' 替换为 ''
  21.                 secure: false, // 如果是 https 接口,需要配置为 true
  22.                 changeOrigin: true // 需要虚拟托管站点
  23.             },
  24.             // 你可以在这里继续添加更多的代理规则
  25.         }
  26.     },
  27.     // 插件配置
  28.     plugins: [
  29.         new HtmlWebpackPlugin({
  30.             template: './src/index.html'
  31.         })
  32.     ],
  33.     // 模块配置
  34.     module: {
  35.         rules: [
  36.             // 在这里添加 loader
  37.         ]
  38.     }
  39. };
复制代码
在这个配置中:

  • entry 和 output 分别配置了入口和输出文件。
  • devServer 是开发服务器的配置:

    • contentBase 指定了静态文件的位置。
    • compress 开启 gzip 压缩。
    • port 设置开发服务器的端口为 9000。

  • devServer.proxy 是重要的代理配置部分:

    • 针对任何以 /api 开始的请求,代理规则会将请求转发到 http://localhost:3000 上。
    • pathRewrite 将路径中的 /api 替换为空字符串,这意味着例如 /api/user 会被转发为 http://localhost:3000/user。
    • secure: false 表示接受对 https 的代理,这在目标服务器使用自签名证书时很有用。
    • changeOrigin: true 用于控制 Host 头的值。如果为 true,Host 头会被修改为目标 URL 的主机名。

  • plugins 和 module 分别用于配置 Webpack 插件和模块加载器。

来源:https://www.cnblogs.com/azoux/p/17840835.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具