China Naming Network - Company naming - How to use hot refresh and hot load correctly in webpack

How to use hot refresh and hot load correctly in webpack

What I brought to you this time is how to use hot refresh and hot load correctly in webpack, and what are the precautions for using hot refresh and hot load in webpack. The following is an actual case. Let's have a look.

The difference between thermal refreshing and thermal loading was found on the scaffold.

I believe that most developers of vue started with vue-cli, and many beginners happily run vue projects but dare not change the configuration of vue-cli at will (after all, webpack is really complicated, and vue-cli has done a lot of work to optimize the experience of beginners).

In contrast, react did not provide relatively robust scaffolding (at least it was not obvious to me, please comment). As far as I know, one is yeoman's generator-react-webpack, react's create-react-app, and there is a good react-starter-kit (hot loading, which integrates a lot of codes and has high reference).

When I was studying react, I found that the first two scaffolding of react mentioned above provided hot refreshing instead of hot loading.

Simply distinguish between hot loading and hot refreshing:

Hot refresh: After the file is changed internally, the whole page is refreshed without any status (such as the input form where the content has been entered), which is equivalent to webpack pressing F5 to refresh it for you.

Hot loading: after the file is changed, the changed area is changed at the least cost. As far as possible, keep the state before changing the file (input the contents of input and modify the codes of other tags).

Although both of them have improved the development experience compared with traditional development (manual F5), there is still a big gap between them, especially when the project becomes more and more complicated, we must solve this problem once and for all (leave more time to develop bugs).

Hands-on modification

Provisioning from scratch is another aspect, so we will make changes directly from vue-cli.

The following steps only list the key points for reference. For details, please refer to the final github complete project.

Delete dependencies, files, etc. related to vue. Everything in the whole scr can be deleted.

Package.json relies on adding Babel-Loader Web Pack-Dev-ServerReact-Hot-Loader (the most critical).

Package.json command line setting "dev": "webpack-dev-server-inline-progress-configbuild/webpack.dev.conf.js"

Adding. The jsx file to webpack.base.conf needs babel-loader processing, and the configuration options are: {plugins: ['react-hot-loader/Babel']}

. Babelrc adds react to the preset, and adds the plug-in below: ['react-hot-loader/babe']

Create main.js in the src folder (the name should be the same as 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 applications from'. /pages/App '； //Write it yourself

"import" /assets/CSS/reset . scss '；

//Render the main component into dom.

react DOM . render(& lt； app/& gt；，document . getelementbyid(' app ')；

Export the default heat (module) (app); //At this point, the key to hot loading, we can happily experience the rapid feeling of hot loading with react ~

What's the problem?

In fact, the main.js file in vue-cli simply modifies the code related to react (don't forget to configure babel to handle jsx), and it is still hot-refreshed.

After observing and comparing the local code, I found an attractive name:

In the webpack.dev.conf file:

NewWebPack。 HotModulePlacementPlugin () knows that this is the key to realize hot loading, and it needs the modularity of the code itself (that is to say, any framework that can write reusable components like the three major frameworks can take advantage of this property), so that hot loading can be realized by inserting and pulling code.

Moreover, the jsx special effect of react can't be handled by HotModuleReplacementPlugin, so it can only be refreshed honestly.

In this case, the react-hot-loader is ready to come out. With the official use method, you can continue to use hot packs.

Ps: For reference only, I am also exploring and learning many codes of react.

I believe you have mastered the method after reading this case. For more exciting, please pay attention to other related articles on Gxl!