请参阅网络包文档
您可以将一个标志添加到webpack-dev-server命令中

webpack-dev-server --https

虽然上面的答案对于cli是正确的，但如果您不在CLI中，您可以执行类似以下的操作（在一个大任务中）：

var WebpackDevServer = require('webpack-dev-server');

new WebpackDevServer(webpack(WebpackDevConfig), {
    https: true,
    hot: true,
    watch: true,
    contentBase: path.join(__dirname, 'src'),
    historyApiFallback: true
}).listen(1337, 'localhost', function(err, result) {
    if (err) {
        console.log(err);
    }
    console.log('Dev server running at https://localhost:1337');
});

这仅适用于测试环境：
你需要配置你的webpack-dev-server如下：
webpack-dev-server --https --cert ./cert.pem --key ./key.pem
最简单的解决方法是生成一个没有密码的密钥**（我不知道这样做的安全后果！但这仅用于测试）。**
要从密钥中删除密码，请使用以下命令：
$ openssl rsa -in key.pem -out newKey.pem
并在预览配置行中使用新密钥

使用webpack-dev-server --https可以创建一个自签名证书，但它并不适用于所有用例。
浏览器会要求您输入安全异常，并在url栏中显示连接不安全。
因此，建议使用mkcert为localhost创建本地受信任的开发证书
然后通过CLI使用它：

webpack-dev-server --https --key C:/Users/User/localhost-key.pem --cert C:/Users/User/localhost.pem --cacert C:/Users/User/AppData/Local/mkcert/rootCA.pem

或在webpack.config.js中配置devServer.https选项：

devServer: {
    https: {
        key: fs.readFileSync('C:/Users/User/localhost-key.pem'),
        cert: fs.readFileSync('C:/Users/User/localhost.pem'),
        ca: fs.readFileSync('C:/Users/User/AppData/Local/mkcert/rootCA.pem')
    }
}

mkcert默认创建Unix的.pem文件，所以如果你在Windows上，你可能需要使用Notepad++将它们转换成Windows格式

在Windows上测试（2021年4月22日）。简单（无需安装）。

• • 1.项目配置**

在Powershell（或CMD）的项目根目录中运行：

npx mkcert create-ca
npx mkcert create-cert

您的webpack.config.js：

devServer: {
    // ...
    https: {
        key: fs.readFileSync("cert.key"),
        cert: fs.readFileSync("cert.crt"),
        ca: fs.readFileSync("ca.crt"),
    },
    // ....
},

• • 2.安装证书**

双击ca.crt〉安装证书〉...

...〉当前用户〉将所有证书放入下列存储区〉受信任的根证书颁发机构〉...

...〉完成〉是

• • 3.检查安装是否正确**

开始〉类型："cert"〉管理用户证书〉...

...〉受信任的根证书颁发机构〉证书〉测试CA

• • 4.重新加载和测试**

重新加载您的浏览器，启动yout webpack开发服务器并检查SSL证书的有效性：
第一节第五节第一节第六节第一节

• • 其他步骤**

如果出现此错误：

您可以将此配置添加到webpack.config.js：

devServer: {
    // ...
    // https: { ... }
    disableHostCheck: true,
    // ....
},

• • 有关详细信息：**

https://webpack.js.org/configuration/dev-server/#devserverhttps
https://www.npmjs.com/package/mkcert

在我的例子中，我必须运行所有这些命令来获得证书：

openssl genrsa -out private.key 4096
openssl req -new -sha256 -out private.csr -key private.key
openssl x509 -req -days 3650 -in private.csr -signkey private.key -out private.crt -extensions req_ext
openssl x509 -in private.crt -out private.pem -outform PEM

最后：

npm run dev -- --open --https --cert private.pem --key private.key

我的工作React项目，现在想在这个项目上添加SSL证书，并运行我的网站与https，所以按照以下步骤：
1.在webpack.config.js中添加https

devServer: {
    https: true,
    host: '0.0.0.0', // you can change this ip with your ip
    port: 443,       // ssl defult port number
    inline: true,
     
    historyApiFallback: true,
    publicPath: '/',
    contentBase: './dist',
    disableHostCheck: true
}

1.在package.json文件中添加SSL公共证书如果您不想在package.json文件中添加证书，则必须在webpack.config.js中添加证书，必须在项目中添加证书，您可以在package.json文件或webpack.config.js中添加证书
对于包. json

scripts: {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack-dev-server  --open --https --cert /path/to/private.crt --key /path/to/private.key"
}

或网络包配置js

devServer: {
    https: true,
    host: '0.0.0.0', // you can change this ip with your ip
    port: 443,       // ssl defult port number
    inline: true,
    https: {
        key: fs.readFileSync('/path/to/private.pem'),
        cert: fs.readFileSync('/path/to/private.pem'),
        ca: fs.readFileSync('/path/to/private.pem')
    }
    historyApiFallback: true,
    publicPath: '/',
    contentBase: './dist',
    disableHostCheck: true
}

1.在终端上运行npm start命令，也可以使用pm2 start npm -- start

类似的情况是，从内部使用http的Docker容器提供webapp，但traefik通过https提供app（多个端口：4000，3000），因此套接字客户端正在尝试连接到http://my.app.url:3000。
在花了几个小时找出一个解决方案后，在webpack 5中找到了这个：

devServer: {
    client: {
        port: ' ', //<--must be empty to eliminate the 3000 port for connecting to socket client
    },
    devMiddleware: {
        writeToDisk: true,
    },
    transportMode: 'sockjs',
    port: 3000, // port which is dev server opening for the sockets
    ...(process.env.DOCKER_DEV && {
        host: '0.0.0.0',
        firewall: false,
        public: 'https://my.app.url', <-- HTTPS here
    }),
},