Webpack--devServer的常用配置

ゞ浴缸里的玫瑰 2023-09-29 17:06 13阅读 0赞

原文网址：[Webpack--devServer的常用配置\_IT利刃出鞘的博客-CSDN博客][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,
          },
        },
      },
    };

**示例：代理部分内容**

有时不想代理所有内容。 可以基于函数的返回值绕过代理。

在该功能中，可以访问请求，响应和代理选项。

1.  返回 null 或 undefined 以继续使用代理处理请求。
2.  返回 false 会为请求产生 404 错误。
3.  返回提供服务的路径，而不是继续代理请求。

例如，对于浏览器请求，想要提供 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,
          },
        },
      },
    };

[Webpack--devServer_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126560143
[http-proxy-middleware]: https://github.com/chimurai/http-proxy-middleware
[documentation]: https://github.com/chimurai/http-proxy-middleware#options