Как правильно настроить webpack-dev-сервер с опцией хоста?

До сих пор моя конфигурация веб-пакета была идеальной для меня. Но с этой ночи я стараюсь использовать опцию хоста в webpack-dev-server, особенно для тестирования моего сайта на мобильных устройствах.

Я пробовал много способов:

  • используя мой IP

  • используя 127.0.0.1

т.д..

Я не могу получить доступ к серверу со своего телефона (Iphone 6+ Safari), а также пробовал с другого ноутбука.

Вот мой конфиг:

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
const path = require('path');

module.exports = merge(common, {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.scss$/i,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            sourceMap: true,
                        }
                    },
                    {
                        loader: 'resolve-url-loader',
                        options: {
                            sourceMap: true,

                        }
                    },
                    {
                        loader: 'adjust-sourcemap-loader',
                        options: {
                            debug: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|svg|jpeg|jpg|gif)$/i,
                exclude: /fonts/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'assets/icons/[name].[hash:7].[ext]'
                        }
                    }
                ]
            },
            {
                test:/\.(png|ico)$/i,
                exclude: /icons/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'assets/favicon/[name].[hash:7].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    devtool: 'eval-source-map',
    devServer: {
        inline: true,
        host: '0.0.0.0',
        port:'8080',
        contentBase: '././src',
        overlay:{
            warnings: true,
            errors: true
        },
        clientLogLevel: 'error',
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
});

пакет.json

{
  "name": "hocusbookus",
  "version": "1.0.0",
  "description": "Website",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open Firefox --config ./webpack/webpack.dev.js --watch",
    "build": "webpack --config ./webpack/webpack.prod.js"
  },
  "author": "Cédric Gourville",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@fortawesome/fontawesome-free": "^5.7.1",
    "adjust-sourcemap-loader": "^2.0.0",
    "autoprefixer": "^9.4.7",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^1.0.1",
    "copy-webpack-plugin": "^5.0.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^4.6.0",
    "jquery": "^3.3.1",
    "jquery-scrollify": "^1.0.19",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "postcss-loader": "^3.0.0",
    "resolve-url-loader": "^3.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14",
    "webpack-merge": "^4.2.1"
  }
}

Спасибо за помощь

попробуйте --host 0.0.0.0, который будет прослушивать все IP-адреса

lecstor 06.03.2019 03:42

@lecstor Я сделал .. когда я это сделал, я тоже не могу получить доступ к локальному серверу

user7637140 06.03.2019 03:48

используя локальный IP-адрес вашей машины в мобильном браузере? не могу найти сервер? или проблемы с CORS? что-то другое?

lecstor 06.03.2019 03:55

@lecstor Не знаю, проблема ли это в мобильном браузере. Я также тестирую его на другом ноутбуке, и я не могу получить к нему доступ. Все мои устройства подключены к одной сети (wifi)

user7637140 06.03.2019 04:03

мм, тогда не уверен. Возможно, попробуйте свернуть конфигурацию devServer. Я только что проверил свой только с портом, установленным в конфигурации, запустил его с --host=0.0.0.0, и я могу получить к нему доступ с другого ноутбука по адресу 192.168.178.76:3000.

lecstor 06.03.2019 04:12

@lecstor 192.168.178.76:3000 как вам такой хороший порт? вы указываете это в своем конфиге? это ваш IP, который вы найдете в своем ipconfig?

user7637140 06.03.2019 04:14

да, 3000 находится в конфигурации (в виде числа, а не строки), IP — это адрес интерфейса Wi-Fi на моем Mac, поэтому да, он должен быть в вашем ipconfig.

lecstor 06.03.2019 04:17

Я видел, что что-то вроде 0.0.0.0 не работает в системе Windows. Я пробовал 127.0.0.1 вместо

user7637140 06.03.2019 05:09

@lecstor Большое спасибо !!!!! (как число, а не строка) сделал это.

user7637140 06.03.2019 05:50
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
9
3 285
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
devServer: {
        inline: true,
        host: '192.137.0.35', /* my own IP */
        port:3000, /* number not string */
        contentBase: '././src',
        overlay:{
            warnings: true,
            errors: true
        },
        clientLogLevel: 'error',
    },

и я могу получить доступ к своему локальному серверу на других устройствах, подключенных к той же сети Wi-Fi. Адрес: 192.137.0.35:3000.

Глупая ошибка конечно

Благодаря @lecstor

Другие вопросы по теме