HMR有时只更新

Question

有没有人真正的HMR启动和运行顺利？我的有时只是热交换。那件事怎么可能？我将编辑一行文本，它将交换。然后，我将去编辑相同的文本，它将看不到它。我用webpack 1.14。我花了太多时间在这个问题上，在网上搜索每个示例，并重新做和配置我的webpack.config。如果没有一些关于如何设置webpack开发服务器的真正文档，这件事就很难做到，webpack开发的服务器每次都能工作。所有关于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开发中间件
• 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现在已经被检测到了。