如何配置Webpack Dev Server使用自定义证书，避免自动替换？

绝对不用写定时替换脚本！你可以通过配置Webpack Dev Server，让它直接加载你的自定义证书，彻底跳过自动生成证书的逻辑，从根源解决30天被替换的问题。下面分两种场景给你具体方案：

1. 手动配置Webpack（非Create React App项目） #

在你的webpack.config.js中，直接给devServer添加https配置项，指定你的证书和私钥路径：

首先，记得在配置文件顶部导入fs和path模块：

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

然后修改devServer部分：

module.exports = {
  // 其他Webpack配置...
  devServer: {
    // 启用HTTPS并指定自定义证书
    https: {
      key: fs.readFileSync(path.resolve(__dirname, './cert/your-private-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, './cert/your-server.pem')),
      // 如果有CA证书，也可以加上这一行
      // ca: fs.readFileSync(path.resolve(__dirname, './cert/your-ca.pem'))
    },
    // 针对新版本Webpack Dev Server（v4+），补充server配置确保生效
    server: {
      type: 'https',
      options: {
        key: fs.readFileSync(path.resolve(__dirname, './cert/your-private-key.pem')),
        cert: fs.readFileSync(path.resolve(__dirname, './cert/your-server.pem'))
      }
    }
  }
};

这样配置后，Webpack Dev Server会直接使用你指定的证书，完全不会再自动生成和替换server.pem。

2. Create React App（CRA）项目 #

CRA默认隐藏了Webpack配置，你有两种简单的方式配置自定义证书：

方式一：使用环境变量（最简便） #

在项目根目录创建.env.development文件，添加以下内容：

SSL_CRT_FILE=./cert/your-server.pem
SSL_KEY_FILE=./cert/your-private-key.pem

重启开发服务器后，CRA会自动加载你指定的证书，无需修改任何配置文件。

方式二：用react-app-rewired自定义配置 #

如果需要更灵活的配置，可以使用react-app-rewired：

1. 安装依赖：

npm install react-app-rewired --save-dev

2. 在项目根目录创建config-overrides.js文件：

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

module.exports = function override(config, env) {
  // 修改devServer配置
  config.devServer = {
    ...config.devServer,
    https: {
      key: fs.readFileSync(path.resolve(__dirname, './cert/your-private-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, './cert/your-server.pem')),
    },
    server: {
      type: 'https',
      options: {
        key: fs.readFileSync(path.resolve(__dirname, './cert/your-private-key.pem')),
        cert: fs.readFileSync(path.resolve(__dirname, './cert/your-server.pem')),
      }
    }
  };
  return config;
};

3. 修改package.json中的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

额外注意事项 #

• 确保证书文件的路径正确，使用path.resolve可以避免相对路径带来的问题
• 如果你的证书是自签名的，记得先在操作系统中信任该证书，这样浏览器就不会再弹出“不安全”的提示（也不会出现NET:ERR_CERT_AUTHORITY_INVALID错误）
• 这个配置是持久化的，只要配置文件不被修改，Webpack Dev Server就会一直使用你的自定义证书

内容的提问来源于stack exchange，提问作者Wcoder