从本地网络访问Webpack Dev Server？ （在移动设备上实现热重新加载）

Question

I want to test a React website from a device on my local network. It works on other PCs but not on my phone.

Do you guys have any ideas what might cause this? Here's how my config file looks:

const webpack = require('webpack');
const path = require('path');

module.exports = {

    entry: {
        mainFeedPage: [
            'webpack/hot/only-dev-server',
            './src/mainFeedPage.js'
        ],
        venues: [
            'webpack/hot/only-dev-server',
            './src/venues.js'
        ],  
        artists: [
            'webpack/hot/only-dev-server',
            './src/artists.js'
        ]  
    },
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'js/[name].js',
        publicPath: '/public/'
    },
    devServer: {
        inline:true,
        port: 4000,
        hot: true,
        colors: true,
        progress: true,
        host: '0.0.0.0'

    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: [
                    'react-hot', 
                    'babel?presets[]=react,presets[]=es2015'
                ] 
            }
        ]
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.optimize.CommonsChunkPlugin({

            // Export bundles for each entry and one for code they share
            name: "shared",
            filename: "js/shared.js",
            chunks: ["mainFeedPage", "venues"]
        })
    ],

    resolve: {
        modulesDirectories: ['node_modules', 'src', 'components', 'stores'],
        extensions: ['', '.js', '.scss'],
        root: [path.join(__dirname, './src')],
    }
};

UPDATE Tried this, but couldn't get it to work: https://github.com/gaearon/react-hot-loader/issues/107#issuecomment-85712166

Answer 1

This is not a direct fix, but I've got a project based off of the React Transform boilerplate offered by Dan Abramov and it works flawlessly on mobile Android devices. Haven't tested on iOS. It's very similar in principle to React Hot Loader: https://github.com/gaearon/react-transform-boilerplate

It's deprecated, but so is React Hot Loader until version 3 is released.

Admittedly, this 'solution' is probably like hitting a nail with a sledgehammer. Hopefully someone can offer something simpler that doesn't require swapping a bunch of dependencies and build configurations.

Answer 2

Christian's example solved my issue. You'd have to customize the webpack.config files if you want to use bundles. This could have been solved just by googling, but it took me a lot of time to understand how Node and Express work...