Question

将webpack-serve配置为允许通过SSL进行热模块重载（HMR）的正确方法是什么？我可以通过HTTPS毫无问题地访问提供的内容，但是无法建立用于HMR的websocket连接。这是我在页面加载后在Firefox控制台中看到的内容：

Firefox can’t establish a connection to the server at wss://local.jonmorton.me:5444/.

这似乎表明正在使用配置的协议（wss）和端口（5444）。但是，我无法从文档中辨别出我还缺少什么。

这是我的配置的相关部分：

const HOST = process.env.HOST
...
let options = {
  ...
  serve: {
    host: HOST,
    port: 5443,
    https: {
      key: fs.readFileSync(HOST + '.key'),
      cert: fs.readFileSync(HOST + '.cert')
    },
    hot: {
      host: HOST,
      port: 5444,
      https: true
    }
}

我有理由相信其余配置是正确的，但是为了完整起见，我将其包括在内。

const fs = require('fs');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MODE = process.env.WEBPACK_SERVE ? 'development' : 'production';
const HOST = process.env.HOST || 'localhost';
let options = {
  mode: MODE,
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.js'
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/templates/index.html',
                            filename: 'index.html' })
  ],
  module: {
    rules: [
      { test: /\.js$/,
        exclude: /node_modules/,
        use: [{loader: 'babel-loader',
               options: { presets: ['babel-preset-env'] }}]},
      { test: /\.(scss|sass)$/,
        use: [{loader: 'style-loader' },
              {loader: 'css-loader'   },
              {loader: 'sass-loader'  }]}]
  },
  serve: {
    host: HOST,
    port: 5443,
    https: {
      key: fs.readFileSync(HOST + '.key'),
      cert: fs.readFileSync(HOST + '.cert')
    },
    hot: {
      host: HOST,
      port: 5444,
      https: true
    }
  }
};
module.exports = options;

一些其他背景：

我在带有Firefox 61.0的Ubuntu 16.04和带有Firefox 61.0和Safari 11.1的MacOS 10.13上遇到了这个问题。
我正在使用webpack-serve版本1.0.4，devcert版本1.0.0，Node.js版本10.5。
我确信证书在访问webpack-serve服务的内容时有效。
我确定websocket服务器正在运行；当我直接通过HTTP访问端口时，看到消息：Upgrade Required
我已将端口从默认值更改为确保Firefox不会逐个端口强制执行例外，我可以通过HTTPS在各种端口上访问内容，而无需为证书添加新的例外。
当我在相同配置中禁用https时，HMR会按预期工作。

如何配置webpack-serve通过SSL提供热模块重新加载（HMR）？

0 个答案: