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; 

マイファイル構造は次のとおりです。

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) 
     }); 
    } 

奇妙なこと：

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

私index.jsxは次のようになります変更を加えたときにホットスワップが発生することがあります。他の時は全くありません。ちょうどそこにいくつかの賢明なインターネットの賢人がいたのだろうと思っている人は、現在の設定でなぜそれが起こっているのか理解するだろう。

Answer 1

私が使用しているのに、私は、同じ断続的HMRの問題を抱えていた

• のWebPACK-DEV-ミドルウェア
• WebPACKのホット・ミドルウェア

HMRは時々働いていたとして、I差異が常に検出されているとは思われませんでした。

私は、Windows上でこれを実行しているので、私は私のHMRがより一貫して今検出され、この構成に

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

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

を追加してみました。