在HTTPS / Web套接字安全上运行的Webpack开发服务器

通常，在开发人员模式下，Webpack使用HTTP运行。通常，有一个Web服务器在单独的端口上使用HTTP / Websockets通过HTTP和Webpack提供内容。

是否可以在https上运行Web服务器并在https / websocket secure上运行webpack？

查看webpack文档

您可以将一个标志添加到webpack-dev-server命令中

webpack-dev-server --https 

尽管以上答案对于cli是正确的，但如果您不在CLI中，则可以执行以下操作（在gulp任务中）：

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');
});

这仅适用于TEST环境：

您需要按照以下步骤配置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您一起创建自签名证书。但这不适用于所有用例。

浏览器会要求您提供安全例外，并在网址栏中显示连接不安全。

因此，建议使用mkcert为本地主机创建本地信任的开发证书。

然后通过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，则可能需要使用记事本++将其转换为Windows格式。

就我而言，我必须运行所有这些命令来获取证书：

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
      }
   

2. 在package.json文件上添加SSL公共证书如果不想在package.json文件上添加证书，则必须将其添加到webpack.config.js中，这是强制性的，您必须在项目中添加证书可以在package.json文件或webpack.config.js上使用吗

对于Package.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"

            }

或webpack.config.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
       }

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