如何运行 Webpack 开发服务器 --https --hot --inline答案

【问题标题】：How to run Webpack Dev Server --https --hot --inline如何运行 Webpack 开发服务器 --https --hot --inline
【发布时间】：2015-11-05 12:39:01
【问题描述】：

在使用 CLI 进行配置时，有没有办法利用在 https 上运行 webpack-dev-server？

问题是与socket.io 的连接结束于http 而不是https。

存在一种解决方法，但它非常烦人。

在您的index.html 中手动包含 https webpack-dev-server

<script src="https://localhost:8080/webpack-dev-server.js"></script>

配置每个端点以包含webpack/hot/only-dev-server。

app: [
    'webpack/hot/only-dev-server',
    './app.js'
],

// ... more entry points that include the same [] ...

【问题讨论】：

标签： webpack webpack-dev-server

【解决方案1】：

是的，当使用 CLI 进行配置时，有一种方法可以在 https 上配置 webpack-dev-server。

解决方法是不要使用--inline 选项。

有很多方法可以配置服务器和--hot。假设您没有创建自定义服务器实现/中间件（可能是相同的），接下来的一个在文档中有详细说明。

http://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli

不要包含<script src="https://localhost:8080/webpack-dev-server.js"></script>
请勿在条目中包含webpack/hot/only-dev-server。

package.json

{
  "scripts": {
    "start": "webpack-dev-server -d --hot --https --config webpack.config.development.js"
  }
}

webpack.config.development.js

var webpackConfig = require('webpack-config');

module.exports = webpackConfig.fromCwd().merge({
    devServer: {
        colors:             true,
        contentBase:        './build',
        historyApiFallback: true,
        inline:             true,
        progress:           true
    },

    devtool: 'eval-source-map'
});

这里没有列出主要的 webpack 配置。

【讨论】：

【解决方案2】：

我认为您可以将此行添加到入口点以创建安全套接字连接：

"dev-server": "webpack-dev-server/client?https://localhost:8080/",

【讨论】：

【解决方案3】：

我在package.json 中这样使用并开始使用我需要的端口：

"scripts": {
  "serve": "webpack-dev-server --inline --colors --watch --display-error-details --display-cached  --port 3001 --hot"
},

【讨论】：