Vue + Webpack - Specifying the server for hot reload

Question

So I have the following config file for use with webpack-dev-server:

'use strict'
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    mode: 'development',
    entry: [
        './src/app.js'
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })
    ],
}

It works all well and good, however by default it seems to start the live reload server on http://localhost:8082. Is there a way to specify what host to use for the live reload, like say i have a custom domain defined as https://hotreload.com:3000? Any help would be appreciated!

Answer 1

Edit your webpack.config.js to specify devServer.host, devServer.port, and devServer.https. Using your example specs:

module.exports = {
  //...
  devServer: {
    host: 'hotreload.com',
    port: 3000,
    https: true,
  }
}