React + Webpack HMR sta aggiornando la pagina (non il caricamento a caldo)

Question

Ho un po 'di problemi nel far funzionare correttamente il caricatore del webpack reattivo.

Quando carico pagina ricevo il seguente come ci si aspetta:

[HMR] In attesa di segnale di aggiornamento dal WDS ...
[WDS] sostituzione modulo hot-abilitato.

Ma quando salvi un cambiamento la pagina aggiorna automaticamente il browser (piuttosto che una sostituzione HMR).

//webpack.config.js 

{ 
    entry: { 
    client: 'webpack-dev-server/client?http://localhost:8786', // WebpackDevServer host and port 
    app: "./HelloWorld.tsx" 
    }, 
    devtool: process.env.WEBPACK_DEVTOOL || 'cheap-module-source-map', 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: '[name].entry.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.ts(x?)$/, 
     loaders: ['react-hot', 'babel-loader?cacheDirectory=true,presets[]=es2015,presets[]=react', 'ts-loader'] 
     } 
    ] 
    }, 
    devServer: { 
     contentBase: "./dist", 
    port:8786 
    }, 
    plugins: [ 
     new webpack.NoErrorsPlugin() 
    ] 
} 

comando: webpack-dev-server --hot --inline

su un sidenote interessante se uso babel-preset-react-hmre tutto funziona come previsto. (Comunque non voglio davvero usarlo perché sembra meno supportato rispetto al corretto caricatore a caldo reattivo).

Answer 1

Mi sono appena imbattuto in questo problema. Un paio di cose:

Per aiutare a eseguire il debug di un particolare problema, prova a abilitare "Conserva registro" (negli strumenti di sviluppo di Chrome). Ciò manterrà i log della console attraverso gli aggiornamenti delle pagine, quindi sarà almeno in grado di vedere tutti i messaggi che webpack-dev-server sta registrando prima che attivi un aggiornamento.

Nel mio webpack-dev-server di caso era rinfrescante perché non avevo optato in HMR nel file di mio ingresso js. Aggiungendo la seguente riga al file risolto il problema:

// Opt-in to Webpack hot module replacement 
if (module.hot) module.hot.accept() 

Per i dettagli sulla module.hot API webpack HMR docs sono molto utili.