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

2019-03-28 16:35发布

问题:

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>
  1. 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 [] ...

回答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.



回答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/',



回答3:

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

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