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

Question

Is there a way to leverage running the webpack-dev-server on https when configuring using CLI?

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

---

A workaround exists, but its very annoying.

1. Manually include https webpack-dev-server in your index.html

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

2. Configure each end point to include webpack/hot/only-dev-server.

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

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

Answer 1

Yes there is a way to configure webpack-dev-server on https when configuring using CLI.

The solution is to not use --inline option.

There are many ways to configure the server and --hot. The one to follow, assuming your not creating a custom server implementation/middleware (Might be the same), is detailed in the docs.

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

• Do not include <script src="https://localhost:8080/webpack-dev-server.js"></script>
• Do not include webpack/hot/only-dev-server into the entry.

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

Main webpack configuration is not listed here.

Answer 2

I think you might add this line to the entry point to also create a secure socket connection:

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

Answer 3

I used like this in package.json and started working with port i needed:

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