HMR 만 때때로 업데이트됩니다.

Question

HMR이 실제로 원활하게 작동하고 있습니까? 내 때로는 핫 스와핑 만 있습니다. 어떻게 가능합니까? 나는 한 줄의 줄을 편집 할 것이고 바꿀 것이다. 그런 다음 동일한 텍스트를 편집하고 보지 않을 것입니다. webpack 1.14를 사용하고 있습니다. 이 모든 예제를 온라인에서 검색하고 다시 실행하고 webpack.config를 구성하는 데 너무 많은 시간을 보냈습니다. 이 작업은 매번 작동하는 webpack-dev-server로 정확히 설정하는 방법에 대한 실제 설명서가 없어도 어렵습니다. stackOverflow 및 webpack GitHub 문제에 대한 모든 대답이 없으므로 작성자와 소수의 전문가를 제외하고는 아무도 정말로 이해할 수 없다고 생각할 수 있습니다.

나는이처럼 보이는 웹팩 설정이 있습니다

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의 문제가되었다

• 웹팩-DEV-미들웨어
• 웹팩 핫 미들웨어

HMR 가끔 일하고 있었다, 나는 diffs가 항상 감지되는 것은 아니었던 것으로 의심됩니다.

나는 Windows에서이 작업을 실행하는거야, 그래서 나는이 구성 내 HMR 더 일관 지금 감지

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

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

를 추가했습니다.