原文网址：Webpack--devServer的常用配置_IT利刃出鞘的博客-CSDN博客

简介

说明

        本文介绍webpack的devServer常用的一些配置    
    
    
。

配置格式

配置文件为：webpack.config.js（如果是vue-cli   
    
    
    
，配置文件为vue.config.js）

module.exports = { //... devServer: { proxy: { /api: http://localhost:3000, }, }, };

client

overlay

类型

boolean = true object: { errors boolean = true, warnings boolean = true }

作用

覆盖屏幕    


     


     


     。

示例：当出现编译错误或警告时


     


     


     


，在浏览器中显示全屏覆盖




 




 




 



。

webpack.config.js

module.exports = {   //...   devServer: {     client: {       overlay: true,     },   }, };

通过命令行使用：

npx webpack serve --client-overlay

如需禁用：

npx webpack serve --no-client-overlay

示例：只显示错误信息

webpack.config.js

module.exports = {   //...   devServer: {     client: {       overlay: {         errors: true,         warnings: false,       },     },   }, };

通过命令行使用：

npx webpack serve --client-overlay-errors --no-client-overlay-warnings

open

类型

boolean string object [string, object]

作用

告诉 dev-server 在服务器已经启动后打开浏览器   

   

   

。设置其为 true 以打开你的默认浏览器     

     

     

    。

open 所有配置项

webpack.config.js

module.exports = {   //...   devServer: {     open: {       target: [first.html, http://localhost:8080/second.html],       app: {         name: google-chrome,         arguments: [--incognito, --new-window],       },     },   }, };

示例：启动后打开浏览器

webpack.config.js

module.exports = {   //...   devServer: {     open: true,   }, };

通过命令行使用：

npx webpack serve --open

如需禁用：

npx webpack serve --no-open

示例：在浏览器中打开指定页面

webpack.config.js

module.exports = {   //...   devServer: {     open: [/my-page],   }, };

通过命令行使用：

npx webpack serve --open /my-page

示例：在浏览器中打开多个指定页面

webpack.config.js

module.exports = {   //...   devServer: {     open: [/my-page, /another-page],   }, };

通过命令行使用：

npx webpack serve --open /my-page --open /another-page

示例：提供要使用的浏览器名称 




 




 




 ，而不是默认名称

webpack.config.js

module.exports = {   //...   devServer: {     open: {       app: {         name: google-chrome,       },     },   }, };

通过命令行使用：

npx webpack serve --open-app-name google-chrome

        浏览器应用程序名称与平台相关




  




  




  


。不要在可重用模块中硬编码它
  


  


  


。例如   

   

   

   
，Chrome 在 macOS 是 Google Chrome

     

     

     

，在 Linux 是 google-chrome
  




  




  




 ，在 Windows 是 chrome     
     
     
   。

port

类型

auto string number

作用

指定监听请求的端口号 




   




   




   

。

示例：指定监听请求的端口号

webpack.config.js

module.exports = {   //...   devServer: {     port: 8080,   }, };

通过命令行使用：

npx webpack serve --port 8080

示例：自动使用可用的端口

port 配置项不能设置为 null 或者空字符串  


  


  


  
，要想自动使用一个可用端口请使用 port: auto：

webpack.config.js

module.exports = {   //...   devServer: {     port: auto,   }, };

通过 CLI 使用：

npx webpack serve --port auto

proxy

类型

object [object, function]

作用

        当拥有单独的 API 后端开发服务器并且希望在同一域上发送 API 请求时 
     
     
     
，代理某些 URL 可能会很有用

 



 



 



。

        开发服务器使用功能强大的 http-proxy-middleware 软件包                 。 查看其 documentation 了解更多高级用法  




    




    




    
。 请注意

   




   




   




 ，http-proxy-middleware 的某些功能不需要target键 



 



 



 
，例如 它的 router 功能                 ，但是仍然需要在此处的配置中包含target


    




    




    




 ，否则webpack-dev-server 不会将其传递给 http-proxy-middleware

















。

示例：指定后端地址

使用后端在 localhost:3000 上















，可以使用它来启用代理：

webpack.config.js

module.exports = {   //...   devServer: {     proxy: {       /api: http://localhost:3000,     },   }, };

现在                  ，对 /api/users 的请求会将请求代理到 http://localhost:3000/api/users                。

示例：重写路径

如果不希望传递/api


     



     



     



 ，则需要重写路径：

webpack.config.js

module.exports = {   //...   devServer: {     proxy: {       /api: {         target: http://localhost:3000,         pathRewrite: { ^/api: },       },     },   }, };

示例：支持https的后端服务器

        默认不支持使用无效证书的HTTPS的后端服务器   



     



     



     。 如果需要














，可以这样修改配置：

webpack.config.js

module.exports = {   //...   devServer: {     proxy: {       /api: {         target: https://other-server.example.com,         secure: false,       },     },   }, };

示例：代理部分内容

有时不想代理所有内容


















。 可以基于函数的返回值绕过代理    
    
    
。

在该功能中   
    
    
    
，可以访问请求


     


     


     


，响应和代理选项    


     


     


     。

返回 null 或 undefined 以继续使用代理处理请求




 




 




 



。 返回 false 会为请求产生 404 错误   

   

   

。 返回提供服务的路径 




 




 




 ，而不是继续代理请求     

     

     

    。

例如   

   

   

   
，对于浏览器请求

     

     

     

，想要提供 HTML 页面服务
  




  




  




 ，但是代理 API 请求




  




  




  


。 可以执行以下操作：

webpack.config.js

module.exports = {   //...   devServer: {     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;           }         },       },     },   }, };

示例：将多个路径代理到同一目标

        如果想将多个特定路径代理到同一目标  


  


  


  
，则可以使用一个或多个带有 context 属性的对象的数组：

webpack.config.js

module.exports = {   //...   devServer: {     proxy: [       {         context: [/auth, /api],         target: http://localhost:3000,       },     ],   }, };

示例：代理对root的请求

默认不会代理对 root 的请求
  


  


  


。 要启用根代理 
     
     
     
，应将 devMiddleware.index 选项指定为false：

webpack.config.js

module.exports = {   //...   devServer: {     devMiddleware: {       index: false, // specify to enable root proxying     },     proxy: {       context: () => true,       target: http://localhost:1234,     },   }, };

示例：不保留主机头的来源

        默认情况下

   




   




   




 ，代理时会保留主机头的来源 



 



 



 
，可以将 changeOrigin 设置为 true 以覆盖此行为     
     
     
   。 在某些情况下                 ，例如使用 name-based virtual hosted sites


    




    




    




 ，它很有用 




   




   




   

。

webpack.config.js

module.exports = {   //...   devServer: {     proxy: {       /api: {         target: http://localhost:3000,         changeOrigin: true,       },     },   }, };