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-hot-middleware

由于 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 现在更稳定地被检测到了。