@kotemedia
Режу

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

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

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

Адрес отдается вида: 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' ]
    }
}
  • Вопрос задан
  • 2718 просмотров
Решения вопроса 1
alexsobolenko
@alexsobolenko
Программист
Это нужно прописать не в webpack.config.js, а в package.json.

"scripts": {
    "dev": "webpack-dev-server --host 192.168.x.x"
  }
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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'
    ]);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы