Webpack 热模块替换卡在 [HMR] 等待来自 WDS 的更新信号

Question

我在我的 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] Disconnected! 错误。而且我没有在控制台中看到 [WDS] Hot Module Replacement enabled. 登录。

当我更改代码时，webpack 正在重新编译，但没有在浏览器中看到它。

使用以下版本。

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

Answer 1

找到问题了。我正在我的 index.html 中加载一个脚本。那失败了（404）。这导致热模块更换失败。

Webpack 热模块替换卡在 [HMR] 等待来自 WDS 的更新信号

Webpack hot module replacement stuck at [HMR] Waiting for update signal from WDS

reactjs

webpack

react-hot-loader

webpack-hmr