如何正确配置带有主机选项的webpack-dev服务器？

Question

直到现在，我的webpack配置非常适合我。但从今晚开始，我尝试在webpack开发服务器上使用主机选项，特别是在手机上测试我的网站。

我尝试了很多方法：

• 使用我的IP
• 使用127.0.0.1

ect。

我不能用我的手机(Iphone )访问服务器，我也尝试用另一台笔记本电脑。

这是我的配置：

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()
    ]
});

package.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"
  }
}

谢谢你帮我

Answer 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',
    },

我可以通过连接到同一个wifi网络的其他设备访问我的本地服务器。地址:192.137.0.35:3000。

肯定是愚蠢的错误

感谢@lecstor