Webpack DevServer 绝对不能在 iPhone 的本地网络上工作

如何解决Webpack DevServer 绝对不能在 iPhone 的本地网络上工作

自从过去 2 个小时以来，我一直在网上查看有关此的所有帖子，但仍然没有任何效果。 我有一个围绕 Webpack 构建的基本和最近的项目。 这是我的 package.json

{
        "name": "krpano-test","version": "1.0.0","description": "krpano-test","main": "src/index.js","author": "Navalex","license": "MIT","devDependencies": {
                "@babel/core": "^7.12.10","@babel/preset-env": "^7.12.11","autoprefixer": "^10.2.4","babel-core": "^6.26.3","babel-loader": "^8.2.2","babel-plugin-module-resolver": "^4.1.0","babel-polyfill": "^6.26.0","babel-preset-env": "^1.7.0","clean-webpack-plugin": "^0.1.19","copy-webpack-plugin": "^6.2.1","css-loader": "^5.0.1","exports-loader": "^2.0.0","html-webpack-plugin": "^5.0.0-beta.4","mini-css-extract-plugin": "^1.3.3","node-sass": "^5.0.0","postcss": "^8.2.4","postcss-loader": "^4.2.0","raw-loader": "^4.0.2","sass-loader": "^10.1.1","style-loader": "^2.0.0","webpack": "^5.12.3","webpack-cli": "^4.3.1","webpack-dashboard": "^3.2.1","webpack-dev-server": "^3.11.1"
        },"dependencies": {
                "@popperjs/core": "^2.6.0","bootstrap": "^5.0.0-beta1","jquery": "^3.5.1","swf-loader": "^1.0.1"
        },"scripts": {
                "server-dev": "webpack serve --history-api-fallback --inline --progress --mode development","build-prod": "webpack --progress --mode=development"
        }
}

我的目标是能够在与我的计算机连接到同一网络的 iPhone 上查看网站。我已经使用了一个 PHP 本地服务器 (PHP -S 0.0.0.0:8000)，它在所有本地设备上都能完美运行。 但是用webpack，好像根本不行。

我尝试了主机 0.0.0.0，我尝试添加“public”选项、disableCheckHost 选项、打开选项，尝试了几个端口，但没有任何效果……我不明白，因为当我启动 react CRA 开发服务器时，我可以通过本地网络访问它，它似乎也使用webpack dev server...

我在 Windows 10 节点 14.15.3 上运行

这是 Webpack 配置：

require("babel-polyfill");

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const copyWebpackPlugin = require('copy-webpack-plugin');
const Dashboardplugin = require("webpack-dashboard/plugin");


module.exports = {
    entry: ['babel-polyfill',__dirname + '/src/index.js'],output: {
        path: __dirname + '/dist',filename: 'bundle.js',publicPath: '/'
    },module: {
        rules: [
            {
                test: /\.js$/,use: 'babel-loader',exclude: ['/node_modules/','/src/assets/']
            },{
                test: /\.(sa|sc|c)ss$/,use: [{
                    loader: 'style-loader'
                },{
                    loader: 'css-loader'
                },{
                    loader: 'postcss-loader',options: {
                        // `postcssOptions` is needed for postcss 8.x;
                        // if you use postcss 7.x skip the key
                        postcssOptions: {
                            // postcss plugins,can be exported to postcss.config.js
                            plugins: function () {
                                return [
                                    require('autoprefixer')
                                ];
                            }
                        }
                    }
                },{
                    loader: 'sass-loader'
                }]
            },{
                test: /\.(tpl|txt|xml)(\?.*)?$/,use: 'raw-loader'
            }
        ]
    },plugins: [
        new Dashboardplugin(),new CleanWebpackPlugin(['dist']),// copy assets
        new copyWebpackPlugin({
            patterns: [
                {from: 'src/assets',to: 'assets'},]
        }),new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html',inject: 'body',scriptLoading: 'blocking'
        }),new MiniCssExtractPlugin()
    ],devServer: {
        contentBase: './src',host: '0.0.0.0',public: '192.168.1.18:3000',port: 3000,disableHostCheck: true,open: true
    }
};

如果有人有解决方案来解决这个问题，那可能真的很好，因为它阻碍了我的开发。

谢谢， 纳瓦莱克斯