How to make webpack dev server available on local network?

Question

webpack

Good afternoon,
for the first time in my life I use webpack, I slow down.
The collector works as it should, but is not available on the local network.
The address is given in the form: localhost:8080
If you substitute IP + port - it is not available.
Googled the solution:

Run webpack-dev-server with --host 0.0.0.0 - this lets the server listen for requests from the network, not just localhost.
Find your computer's address on the network. In terminal, type ifconfig and look for the en1 section or the one with something like inet 192.168.1.111
In your mobile device on the same network, visit 192.168.1.111:8080 and enjoy hot reloading dev bliss.

I don’t understand where exactly to write --host 0.0.0.0
in the settings, I don’t have anything like that:

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TSLintWebpackPlugin = require('tslint-webpack-plugin');

const htmlWebpack = new HtmlWebpackPlugin({
    template: './app/pugs/views/home/home.pug',
    filename: 'index.html',
    chunks: ['home']
});
const htmlWebpackAbout = new HtmlWebpackPlugin({
    template: './app/pugs/views/about/about.pug',
    filename: 'about.html',
    chunks: ['about']
});

module.exports = {
    entry: {
        'home': './app/scripts/views/home/home.main.ts',
        'about':'./app/scripts/views/about/about.main.ts'
    },
    output: {
        publicPath: '/',
        path: path.resolve(__dirname, '../dist'),
        filename: 'js/[name].js'
    },
    plugins: [
        htmlWebpack, 
        htmlWebpackAbout,
        new TSLintWebpackPlugin({
            files: ['./app/**/*.ts']
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ],
    module: {
        rules:[
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:['env']
                        }
                    },
                    {
                        loader:'ts-loader'
                    },
                    {
                        loader: 'tslint-loader'
                    }
                ]
            },
            {
                test: /\.pug$/,
                use:['html-loader','pug-html-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf|)(\?.*)?$/,
                use: 'file-loader?name=fonts/[name][hash].[ext]'
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                use: 'url-loader?name=images/[hash].[ext]'
            }
        ]
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ]
    }
}

Answer 1

This should be written not in webpack.config.js, but in package.json.

"scripts": {
    "dev": "webpack-dev-server --host 192.168.x.x"
  }

Answer 2

In webpack.js, this can be written in the function runServerOnPort(config, port)

const server = new WebpackDevServer(webpack(config), Object.assign({
        hot: true,
        publicPath: config.output.publicPath,
        contentBase: 'app',
        allowedHosts,
        clientLogLevel: 'none',
        stats: statsConfig,
        host: '0.0.0.0',
    }, proxyConfig));
    server.listen(port, '0.0.0.0', (err) => {
        if (err) { throw new gutil.PluginError('webpack', err); }
    });

And if you use hot-reload, then addEntryPoints should look like this

addEntryPoints(config, [
        'regenerator-runtime/runtime',
        'webpack/hot/dev-server'
    ]);

Answer 3

webpack.config.js

...
devServer: {
    host: '192.168.0.0', //your ip address
    port: 8080,
    disableHostCheck: true
}
...