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

How to run Webpack Dev Server --https --hot --inline

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

The problem is the connection to socket.io is over http and not https.


存在解决方法,但它非常烦人。

  1. 在您的 index.html
  2. 中手动添加 https webpack-dev-server
<script src="https://localhost:8080/webpack-dev-server.js"></script>
  1. 配置每个端点以包括 webpack/hot/only-dev-server
app: [
    'webpack/hot/only-dev-server',
    './app.js'
],

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

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

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

配置服务器的方法有很多种,--hot。接下来,假设您没有创建自定义服务器 implementation/middleware(可能相同),在文档中有详细说明。

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配置没有在这里列出。

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

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

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

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