Question:

After upgrading Webpack1 to Webpack2, Live Reloading does not work in development mode. The console displays App Hot Update… . The page does not refresh automatically and there is no change.

Solutions:

Remove hot:true from WebpackDevServer configuration.

new WebpackDevServer(webpack(config), {
  ......
  // hot: true// Remove inline:true. })Copy the code

But I don’t know why…

The following content was updated on 2018/05/15

The above methods do not solve the fundamental problem. I knew that after removing the hot: True configuration, the page would automatically refresh when modifying the file, but I didn’t know why or what the problem was. I restudied this issue after seeing the comments recently. I spent a couple of hours trampling through the pits, getting a new perspective on the problem.

Django + React + webpack Version:

  • react: 0.14.7
  • webpack:2.7.0
  • react-hot-loader:1.3.0
  • webpack-dev-server:1.14.1
  • django-webpack-loader:0.5.0

Sample projects worth reference:

  • django-webpack-loader example(webpack v1 + webpack-dev-server v1 + react-hot-loader v1Before upgrading Webpack, the configuration of my project was similar to this example.
  • react-hot-loader-minimal-boilerplate （webpack v2 + webpack-dev-server v2 + react-hot-loader v3)

The problem

After upgrading Webpack V1 to V2, Hot Module Replacement (HMR) is invalid, and the entry of webpack configuration ‘webpack/ Hot /only-dev-server’ indicates that when HMR fails, The page does not reload (see What’s the difference between ‘webpack/hot/dev-server’ and ‘webpack/hot/only-dev-server’?) , so the page will not refresh automatically if the file is modified in development mode.

The HMR-Hot Module Replacement feature replaces, adds, or removes modules while the application is running without reloading the entire page. Significantly speed up development in the following ways:

  • Preserve application state that is lost when the page is fully reloaded.
  • Update only the changes to save valuable development time.
  • Styling is faster – almost as fast as changing styles in the browser debugger.

The solution

If you don’t need HMR, you just need the page to refresh automatically, You can remove hot:true from the WebpackDevServer configuration or change the entry ‘webpack/hot/only-dev-server’ to ‘webpack/hot/dev-server’. This way, even if HMR does not work, it does not affect how the page changes in real time during development.

But after upgrading WebPack V1 to V2, do you still want to use HMR?

After Webpack was updated to 2.7.0, react-hot-loader was still V1, React-hot-loader v1.3.0 Stopped Working after upgrade to Webpack 2.2.1 #474 V1 should not apply to Webpack V2.

webpack
webpack-dev-server

Make sure your webpack-dev-server AND webpack are both updated. at time of writing this is what i’ve got

"react-hot-loader": 6 "" ^ 3.0.0 - beta.."webpack-dev-server": "^ 2.3.0." "."webpack": "^ 2.2.1." ".Copy the code

Update react-hot-loader and webpack-dev-server.

Note that the django-webpack-loader example does not change the configuration of webpack, but changes the usage of webpack according to the new features of V2 (see migrating to a new version for details). So instead of configuring HMR from 0 to 1, the following is a process for upgrading (mainly React-hot-loader).

  1. npmupgradereact-hot-loaderTo v3 or V4, upgradewebpack-dev-serverV2. 
    "react-hot-loader": "^ 4.0.0"."webpack-dev-server": "^ 2.3.0." "
Copy the code
  2. In the.babelrc filepluginsAdd an item to:"react-hot-loader/babel".
  3. Modify the WebPack configuration. 
    //webpack.config.local.js //1. Var config = require('./webpack.base.config.js');
config.entry.app = [
    'webpack-dev-server/client? http://' + ip + : '3000'.'webpack/hot/only-dev-server',  //dev-server reloads when applying HMR fails, only-dev-server doesn't. 'react-hot-loader/patch', // Add this item './html/app$/, exclude: /node_modules/, use: ['babel-loader'] //before: ['react-hot-loader', 'babel-loader']});Copy the code
  4. Modify theWebpackDevServerThe configuration. addheaders. Details refer toReact Hot Loader Troubleshooting . 
    //server.js
new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true, / /enable HMR on the server
  headers:{'Access-Control-Allow-Origin':The '*'}, // Add this inline:true.historyApiFallback: true
}).listen(3000, 'localhost'.function (err, result) {
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:3000');
});
Copy the code
  5. usereact-hot-loadertheAppContainerEncapsulate the top and bottom components of the application. May refer toreact-hot-loader-minimal-boilerplate. 
    import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import Root from './containers/Root'
const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root')
  )
}
render(Root)
if (module.hot) {
  module.hot.accept('./containers/Root', () => { render(Root)})
}
Copy the code

Thus, the react-hot-loader upgrade is complete. HMR should be in effect. But I ran into a pit where the output from the browser console was fine and the network request for the new package was fine, but the page was still the same. Another pit! Finally, find a solution for the same situation in Hot Updates Not Applied #581.

Effect:

conclusion

The official webpack documentation only provides version V4, and many people are also teasing that they can’t see the historical version of the document. This is really inconvenient for developers. Unofficial documentation is abundant, but it adds to the effort and reduces the efficiency of the troubleshooting process.

After all, the webpack upgrade is quite troublesome, v1 to V2 is ok, not much change, upgrade to V3 configuration changes a lot. Besides, some related plug-ins need to be upgraded. For example, there is a problem with the react-hot-loader not being upgraded this time. There is no official word on which add-ons should be upgraded together, only Google craziness if something goes wrong.

Ridicule return ridicule, pit again much, still have to step on ~~~

Read more:

  • This article about Webpack hot loading is very clear and thorough! Webpack1 Webpack’s HMR & React-hot-loader — The Missing Manual: medium.com/@rajaraodv/…
  • Difference between new webpack.HotModuleReplacementPlugin() and --hot? :Github.com/webpack/web…
  • Webpack 2 configuration React heat load, the React Hot Loading with Webpack 2: engineering.monsanto.com/2017/08/15/…
  • “The module not found: Error: always resolve module ‘react/lib/ReactMount'” : stackoverflow.com/questions/4…
  • Update TodoMVC example to React Hot Loader 3: github.com/reduxjs/red…
  • React Hot Loader: github.com/gaearon/rea…