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

道上的兔子

前言: 我们在平常本地开发时，可能经常需要与后端进行联调，或者调用一些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');
4. module.exports = {
5.     // 入口文件配置
6.     entry: './src/index.js',
8.     // 输出文件配置
9.     output: {
10.         filename: 'bundle.js',
11.         path: path.resolve(__dirname, 'dist')
12.     },
14.     // 开发服务器配置
15.     devServer: {
16.         contentBase: path.join(__dirname, 'dist'),
17.         compress: true,
18.         port: 9000,
19.         proxy: {
20.             // 配置代理规则 '/api'
21.             '/api': {
22.                 target: 'http://localhost:3000', // 目标服务器地址
23.                 pathRewrite: { '^/api': '' }, // 路径重写，将 '/api' 替换为 ''
24.                 secure: false, // 如果是 https 接口，需要配置为 true
25.                 changeOrigin: true // 需要虚拟托管站点
26.             },
27.             // 你可以在这里继续添加更多的代理规则
28.         }
29.     },
31.     // 插件配置
32.     plugins: [
33.         new HtmlWebpackPlugin({
34.             template: './src/index.html'
35.         })
36.     ],
38.     // 模块配置
39.     module: {
40.         rules: [
41.             // 在这里添加 loader
42.         ]
43.     }
44. };

复制代码

在这个配置中：

• 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】 我们会及时删除侵权内容，谢谢合作！