Как сделать Webpack dev сервер доступным в локальной сети?

Question

[Kote]

Добрый день,
впервые в жизни использую вебпак, торможу.

Сборщик работает как надо, но недоступен в локальней сети.

Адрес отдается вида: localhost:8080

Если подставлять IP + порт - недоступно.

Нагуглил решение:

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.

не пойму, где именно писать --host 0.0.0.0

в настройках у меня ничего такого нет:

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

[Алексей Соболенко]

Это нужно прописать не в webpack.config.js, а в package.json.

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

Answer 2

[itdog]

В webpack.js это можно прописать в функции 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); }
    });

И если используйте hot-reload, то addEntryPoints должна выглядеть вот так

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

Answer 3

[Mesuti]

webpack.config.js

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