我无法从其他设备上的本地网络访问webpack开发服务器

时间:2019-11-11 16:29:34

标签: webpack webpack-dev-server

我想从本地网络中的其他设备访问生产网站以查看实时更改。在手机或平板电脑上键入此IP时,我将本地主机设置为0.0.0.0:3000,但出现错误连接被拒绝。我该怎么办?欢迎任何提示和摘要。我是初级开发人员,所以也许我需要更多帮助。也许我应该为Webpack安装另一个依赖项?这里有我的webpack和package.JSON

changing IP and port, tried with webpack-dev-middleware no result

webpack.config.js




 const path = require("path");
    const HtmlWebPackPlugin = require("html-webpack-plugin");

    module.exports = {
        entry: ['@babel/polyfill', './src/js/index.js'],
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: "js/bundle.js"
        },
        devServer: {
            contentBase: "./dist",
            port:3000,
            host:"0.0.0.0",
        },
        devtool: "source-map",
        plugins: [
            new HtmlWebPackPlugin({
                filename: "index.html",
                template: "./src/index.html"
            })
        ],
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                    }
                },
                {
                    test: /\.s[ac]ss$/i,
                    exclude: /node_modules/,
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true,
                                url:true
                            },
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true,
                                config: {
                                    path: 'postcss.config.js'
                                }
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                implementation: require('node-sass'),
                                sourceMap: true,
                            }
                        }
                        ]
                },
                {
                    test: /\.(png|jpe?g|gif)$/i,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[contenthash].[ext]',
                                outputPath:'images/',
                            },
                        },
                    ],
                }
            ]
        }
    };

    package.JSON

    {
      "name": "cat-app",
      "version": "1.0.0",
      "description": "about cats",
      "main": "index.js",
      "scripts": {
        "dev": "webpack --mode development",
        "build": "webpack --mode production",
        "start": "webpack-dev-server --mode development --open --hot",
        "live": "webpack-dev-server --inline --hot"
      },
      "author": "Maciej Gazdecki",
      "license": "ISC",
      "devDependencies": {
        "@babel/core": "^7.6.0",
        "@babel/plugin-proposal-class-properties": "^7.7.0",
        "@babel/preset-env": "^7.6.0",
        "@babel/preset-react": "^7.7.0",
        "autoprefixer": "^9.6.1",
        "babel-loader": "^8.0.6",
        "css-loader": "^3.2.0",
        "file-loader": "^4.2.0",
        "fslightbox-react": "^1.4.4",
        "html-webpack-plugin": "^3.2.0",
        "node-sass": "^4.12.0",
        "postcss-loader": "^3.0.0",
        "sass-loader": "^8.0.0",
        "style-loader": "^1.0.0",
        "webpack": "^4.40.2",
        "webpack-cli": "^3.3.8",
        "webpack-dev-middleware": "^3.7.2",
        "webpack-dev-server": "^3.8.0"
      },
      "dependencies": {
        "@babel/polyfill": "^7.6.0",
        "axios": "^0.19.0",
        "react": "^16.11.0",
        "react-dom": "^16.11.0",
        "react-router-dom": "^5.1.2"
      },
      "browserslist": [
        "defaults",
        "last 5 versions",
        "> 1%",
        "iOS 7",
        "last 3 iOS versions"
      ]
    }

0 个答案:

没有答案