webpack is very powerful, and reasonable scaffolding can save many tedious and meaningless work for our work. Among them, hot refreshing and hot loading greatly improve the development pace compared to traditional development.
Discover the differences in thermal refresh and thermal loading from scaffolding
I believe that most vue developers start with vue-cli. Many beginners are happily running vue projects but dare not change the configuration of vue-cli at will (after all, webpack is indeed very complicated, and vue-cli has also done a lot of work to optimize the experience of beginners).
In contrast, react does not provide a relatively robust scaffolding (at least it has not been found obviously by me, please give me advice). As far as I know, one is yeoman's generator-react-webpack, react's create-react-app, and another good onereact-starter-kit (Hot loading, and it integrates a lot of code and is highly referenced).
When I was learning react, I found that the first two scaffoldings mentioned above provide hot refresh rather than hot loading.
Simple distinction between hot loading and hot refreshing:
Hot refresh: After the file is changed internally, the entire page will be refreshed without any state (such as the Input form that has been entered), which is equivalent to webpack that can help you press F5 to refresh
Hot loading: After the file is changed, change the changed area at a minimum cost. Keep the status before changing the file as much as possible (modify the code of other tags after entering the input content)
Although both have improved the development experience compared to traditional development (manual F5), the two are still very large, especially when the project becomes more complex, we must solve this problem once and for all (leave more time to develop bugs).
Hands-on modification
Result configuration is another area, so we start to change it directly from vue-cli.
The following steps only list the keys for inspiration and reference. For details, please refer to the final github complete project.
- Delete vue-related dependencies, files, etc.; the entire scr can be deleted
- Relying on babel-loader webpack-dev-server react-hot-loader (most critical)
- Command line settings "dev": "webpack-dev-server --inline --progress --config build/"
- Adding .jsx files requires babel-loader processing, and configure options:{plugins:['react-hot-loader/babel']}
- .babelrc presets added react, add plugins below:['react-hot-loader/babel']
- Created in the src folder (the naming must be consistent with the entry file configured by webpack)
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'; // Write it yourselfimport './assets/css/';
// Render the main component into the dom
(<App/>, ('app'));
export default hot(module)(App); // The key to hot loading
At this point, we can happily use react to experience the pleasure of hot loading~
The problem lies
In fact, simply modifying the file in vue-cli to react-related code (don't forget to configure babel to process jsx) and still refresh.
After observing and comparing the local code, I found an attractive name:
In the file:
new ()
After searching online, I learned that this is the key to implementing hot loading. It requires the code itself to have modular properties (this means that as long as frameworks that can write reusable components like the three major frameworks can take advantage of this property), so that hot loading can be achieved by plugging and unplugging the code.
The react jsx special effects that are not something that HotModuleReplacementPlugin can only be refreshed honestly.
In this case, react-hot-loader is about to come out. With the official usage method, you can continue to use hot loading.
ps: For reference only, I am also exploring and learning a lot of react codes
Configured project address:gayhub
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.