Reactjs 网页包热模块更换卡在[HMR]等待来自WDS的更新信号

Reactjs 网页包热模块更换卡在[HMR]等待来自WDS的更新信号,reactjs,webpack,webpack-hmr,react-hot-loader,Reactjs,Webpack,Webpack Hmr,React Hot Loader,我在react项目中使用webpack热模块替换。 配置如下所示 let compilerConfig = { entry: [ 'babel-polyfill', 'webpack-dev-server/client?http://0.0.0.0:9000/', 'webpack/hot/only-dev-server', path.join(ws.srcDir, 'client', 'src', 'index.js')

我在react项目中使用webpack热模块替换。 配置如下所示

let compilerConfig = {
    entry: [
        'babel-polyfill', 
        'webpack-dev-server/client?http://0.0.0.0:9000/',
        'webpack/hot/only-dev-server',
        path.join(ws.srcDir, 'client', 'src', 'index.js'),

    ],
    devtool: 'source-map',
    output: {
        path: path.resolve(ws.srcDir, 'public'),
        filename: 'main.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.(?:p|s)?css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true,
                            },
                        },
                        {
                            loader: 'postcss-loader',
                            options: { config: { path: path.join(__dirname, "postcss.config.js") } }
                        },
                    ],
                }),
            },
            {
                test: /\.(png|woff|woff2|eot|ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader',
            },
            {
                test: /\.(js|jsx)?$/,
                include: [
                    path.resolve(__dirname, 'src'),
                    path.resolve(__dirname, 'node_modules', 'astro'),
                ],
                loader: 'babel-loader',
                options: {
                    babelrc: false,
                    presets: [
                        'react',
                        'es2015',
                        'stage-2'
                    ]
                },
            },
            {
                test: /\.svg$/i,
                use: [
                    {
                        loader: "babel-loader",

                    },
                    {
                        loader: "svg-react-loader",
                        query: {
                            classIdPrefix: '[name]-[hash:8]__',
                            propsMap: {
                                fillRule: 'fill-rule',
                                foo: 'bar'
                            },
                            xmlnsTest: /^xmlns.*$/
                        }
                    }
                ],
            },
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': `"${NODE_ENV}"`,
        }),
        new ExtractTextPlugin('styles.css'),
        new HTMLWebpackPlugin({
            template: path.join(ws.srcDir, 'client', 'src', "index.html"),
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
};


const serverConfig = {
    contentBase: path.resolve(ws.srcDir, 'client', 'src'),
    port: process.env.PORT || '9000',
    inline: true,
    host: '0.0.0.0',
    historyApiFallback: true,
    stats: {
        colors: true,
    },
    headers: {
        'Access-Control-Allow-Origin': '*'
      },
};
我正在通过gulp启动webpack开发服务器,如下所示

gulp.task('webpack-dev', function() {

    WebpackDevServer.addDevServerEntrypoints(compilerConfig, serverConfig);
    const webpackConf = webpack(compilerConfig);
    new WebpackDevServer(webpackConf, serverConfig)
        .listen('9000', '0.0.0.0', function(err) {
            if (err)
                throw new Error("webpack-dev-server", err);
            // Server listening
            console.info("[webpack-dev-server]", "http://localhost:9000");
        })


})
正在断开
[WDS]连接一段时间后出错。而且我没有看到启用热模块更换。
登录控制台

当我更改代码时,网页正在重新编译,但在浏览器中看不到它的反映

使用下面的版本

webpack = 2.3.x
webpack-dev-server = 2.4.x

发现了问题。我正在index.html中加载脚本。失败了(404)。这导致热模块更换失败