reactjs - HMR 有时只更新

Question

有人真的能顺利启动并运行 HMR 吗？我的只是有时热插拔。这怎么可能？我将编辑一行文本，它会交换。然后我会去编辑相同的文本，但它不会看到它。我使用的是 webpack 1.14。我花了太多时间在网上搜索每个示例并重做和配置我的 webpack.config。如果没有一些真正的文档来说明如何使用每次都能工作的 webpack-dev-server 来设置它，这件事是很困难的。对于 stackOverflow 和 webpack GitHub 问题部分上所有未解答的问题，您可能会认为除了创建者和一些专家之外没有人真正理解它。

我有一个如下所示的 webpack 配置:

var config = {
    entry: [
        'webpack-dev-server/client?http://localhost:8080',
        // bundle the client for webpack-dev-server
        // and connect to the provided endpoint
        'webpack/hot/only-dev-server',
        // bundle the client for hot reloading
        // only- means to only hot reload for successful updates
        DEV + "/index.jsx"],
    output: {
        path: OUTPUT,
        filename: "app.js",
        publicPath: '/',
    },
    devtool: 'inline-source-map',
    devServer: {
        hot: true,
        // enable HMR on the server
        contentBase: OUTPUT,
        // match the output path
        publicPath: '/'
        // match the output `publicPath`
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
        new webpack.NamedModulesPlugin(),
        /* new webpack.DefinePlugin({
             'process.env': {
                 NODE_ENV: JSON.stringify('production')
             }
         }),
         new webpack.optimize.UglifyJsPlugin()*/
    ],
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                include: DEV,
                loaders: ["react-hot", "babel-loader"],
            },
            {
                test: /\.css$/,
                loader: 'style-loader'
            }, {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            }
        ],
    }
};

module.exports = config;

我的文件结构是:

-> EZTube
   -> dev
       ->TabComponent
           ->other source code files 
       ->index.jsx
   -> output
       ->app.js
       ->index.html
       ->styles.css
   -> webpack.config.js
   -> package.json

我的index.jsx看起来像:

import React from "react";
import ReactDOM from "react-dom";
import TabComponent from './TabComponent/TabComponent.jsx';
import { AppContainer } from 'react-hot-loader';



    ReactDOM.render(
        <TabComponent />,
        document.querySelector("#container")
    );

        if (module.hot) {
            module.hot.accept('./TabComponent/TabComponent.jsx', () => {
            const NewApp = require('./TabComponent/TabComponent.jsx').default
            ReactDOM.render(NewApp)
        });
    }

奇怪的是，当我进行更改时，有时会发生热交换。其他时候则完全没有。只是想知道是否有一些明智的互联网圣人能够理解为什么在当前的设置下会发生这种情况。

Answer 1

尽管我正在使用，但我也遇到了同样的间歇性 HMR 问题

• webpack-dev-middleware
• webpack-热中间件

由于 HMR 有时会工作，我怀疑差异并不总是能被检测到。

我在 Windows 上运行此程序，因此我尝试添加此配置

    watch: true,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000, //seems to stablise HMR file change detection
        ignored: /node_modules/
    },

https://webpack.js.org/configuration/watch/

现在可以更一致地检测到我的 HMR。