Webpack is very powerful, reasonable scaffolding can save a lot of tedious and meaningless work for our work. Among them, hot refresh and hot loading greatly improve the development rhythm compared with traditional development.

Discover thermal refresh, thermal loading differences from scaffolding

I believe that most vUE developers start with vuE-CLI, and many beginners happily run vue projects but dare not change the vue-CLI configuration at will (after all, Webpack is really complex, and VUe-CLI does a lot of work to optimize the beginner experience).

React doesn’t provide a robust scaffold by comparison (at least not obviously found by me, please comment). I know of yeoman’s generator-React-Webpack, create-react-app, and a nice React-starter-Kit (hot loaded, with a lot of code integrated, very informative).

A simple distinction between hot loading and hot refreshing:

Hot refresh: the whole page is refreshed without retaining any state (such as Input form) after the file is changed. It is equivalent to webpack pressing F5 refresh for you. After the file changes, change the changed area with minimal cost. Preserve the state of the file before modification as much as possible (modify the code of other tags after input)

While both have improved the development experience compared to traditional development (manual F5), the difference between the two is still huge, especially as the project becomes more complex and we have to fix the problem once and for all (allowing more time for bugs).

To modify the

Starting from scratch is another area, so we’ll start with vue-CLI directly.

The following steps only list the key points for inspiration, please refer to the complete Github project at last for details

  • Delete vUE dependencies, files, etc. Everything in the SCR can be deleted
  • Add package.json dependency to babel-loader webpack-dev-server react-hot-loader
  • Package. Json command-line Settings “dev” : “webpack dev – server – the inline – progress – config build/webpack dev. Conf., js.” “
  • } plugins:[‘react-hot-loader/ Babel ‘]} plugins:[‘react-hot-loader/ Babel ‘]
  • [‘react-hot-loader/ Babel ‘]
  • SRC folder to create main.js (name the same as the webpack configuration entry file)
import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader'; 
import App from './pages/App'; 
import './assets/css/reset.scss';
// Render the main component into the dom
ReactDOM.render(<App/>, document.getElementById('app'));
exportdefault hot(module)(App); // The key to hot loadingCopy the code

The problem is simply changing the main. Js file in vuE-CLI to the React code (don’t forget to configure Babel to handle JSX) and still keep the hot refresh. In the webpack.dev.conf file, I found an attractive name:

new webpack.HotModuleReplacementPlugin()
Copy the code

A web search revealed that this is the key to hot loading, which requires that the code itself be modular (meaning that any framework like the big three that can write reusable components can take advantage of this) so that hot loading can be achieved by plugging and pulling code. (welcome to front the whole development of stack exchange circle blow water chat together learn communication: 864305860) and the react JSX effects can not fix HotModuleReplacementPlugin only honestly the thermal refresh. In this case, the React-hot-loader comes into play. With the official usage method, you can continue to use hot loading. conclusion

Thank you for watching, if there are shortcomings, welcome to criticize.