播面

在 Webpack 中，配置 DevServer 开启 HTTPS 和 HTTP/2 协议主要取决于你使用的 webpack-dev-server 版本。目前主流的是 v4/v5 版本（对应 Webpack 5）。

HTTP/2 协议必须建立在 HTTPS 之上，因此开启 HTTP/2 的同时会自动开启 HTTPS。

以下是具体的配置方法：

一、标准配置（Webpack 5 / webpack-dev-server v4+）

在 webpack.config.js 中，通过配置 devServer.server 选项即可轻松开启。

1. 快速开启（使用自动生成的自签名证书）

如果你只需要本地开发开启 HTTPS 和 HTTP/2，不需要自定义证书，直接将 server 设置为 'spdy' 即可：

// webpack.config.js
module.exports = {
  // ... 其他配置
  devServer: {
    port: 8080,
    // 设置为 'spdy' 会同时启用 HTTPS 和 HTTP/2
    server: 'spdy', 
  },
};

注意：这里使用 'spdy' 而不是 'https'，是因为 DevServer 底层使用 Node.js 的 spdy 库来实现对 HTTP/2 的良好支持。

2. 进阶配置（使用自定义 SSL 证书）

浏览器对默认的自签名证书会报“不受信任”警告。为了避免警告，你可以使用工具（如 mkcert ）在本地生成受信任的证书，并在 Webpack 中引入：

const path = require('path');
const fs = require('fs');

module.exports = {
  // ... 其他配置
  devServer: {
    port: 8080,
    // 配置自定义证书并开启 HTTP/2
    server: {
      type: 'spdy', // 开启 HTTPS + HTTP/2
      options: {
        key: fs.readFileSync(path.resolve(__dirname, 'certs/localhost-key.pem')),
        cert: fs.readFileSync(path.resolve(__dirname, 'certs/localhost.pem')),
      },
    },
  },
};

二、使用 mkcert 生成本地信任证书（推荐最佳实践）

为了避免每次打开页面都提示“您的连接不是私密连接”，建议按以下步骤生成本地证书：

1. 安装 mkcert（以 macOS 为例，Windows 可用 choco 安装）：
   bash

   brew install mkcert
   brew install nss # 支持 Firefox

2. 安装本地 CA 证书：
   bash

   mkcert -install

3. 生成本地域名证书（在项目根目录下执行）：
   bash

   mkdir certs
   cd certs
   mkcert localhost 127.0.0.1 ::1

   这会在 certs 目录下生成 localhost+2-key.pem 和 localhost+2.pem，然后将其填入上文的 fs.readFileSync 中即可。

三、验证是否配置成功

1. 启动项目：npx webpack serve
2. 打开浏览器访问 https://localhost:8080
3. 按 F12 打开开发者工具 -> 切换到 Network (网络) 标签页。
4. 在表格表头右键，勾选 Protocol (协议) 列。
5. 刷新页面，如果 Protocol 列显示为 h2，说明 HTTP/2 开启成功；如果 URL 前有小锁图标，说明 HTTPS 开启成功。

四、旧版本配置参考（webpack-dev-server v3）

如果你使用的是较老项目的 Webpack 4 和 webpack-dev-server v3：

// webpack.config.js (仅限 DevServer v3 旧版本)
module.exports = {
  devServer: {
    https: true, // 开启 HTTPS
    http2: true, // 开启 HTTP/2 (会自动开启 https)
    // 如果有自定义证书：
    // key: fs.readFileSync('path/to/key'),
    // cert: fs.readFileSync('path/to/cert'),
  },
};