Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces "how to use react-hot-loader" in detail, the content is detailed, the steps are clear, and the details are handled properly. I hope this "how to use react-hot-loader" article can help you solve your doubts.

"react-hot-loader" is used to refresh the modified parts automatically when writing code in react; "hot-loader" does not refresh the page, but replaces the modified parts, which can be installed with "npm install-- save-dev react-hot-loader".

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What is the use of react-hot-loader?

What does hot loader do? A quote from the official website is

To put it simply, when you write code in react, you can make the modified parts refresh automatically.

But this is different from automatically refreshing the page, because hot-loader doesn't refresh the page, it just replaces the parts you modified.

Installation

The first step is to install react-hot-loader

Npm install-save-dev react-hot-loader

In addition, hot-loader is based on webpack-dev-server, so you have to install webpack-dev-server.

Npm install-save-dev webpack-dev-server

Configuration

Configure webpack-dev-server

When using react-hot-loader, the first thing to do is to have webpack-dev-server open.

Create a server.js in the root directory

Var webpack = require ('webpack'); var WebpackDevServer = require (' webpack-dev-server'); var config = require ('. / webpack.config'); new WebpackDevServer (webpack (config), {publicPath: config.output.publicPath, hot: true, historyApiFallback: true}) .customers (3000, 'localhost', function (err, result) {if (err) {return console.log (err);} console.log (' Listening at http://localhost:3000/')});) Configure webpack.config.js and then add react-hot-loader to the configuration file of webpack. Open webpack.config.jsvar webpack = require ('webpack') Module.exports = {/ / modify entry entry: [/ / write "webpack-dev-server/client? http://0.0.0.0:3000"," webpack/hot/only-dev-server "before the entry file, / / here is your entry file". / src/app.js ",], output: {path: _ _ dirname, filename:" build/js/bundle.js " PublicPath: "/ build"}, module: {loaders: [{test: /\ .jsx? $/, exclude: / node_modules/, / / add react-hot here Note that loaders is used here, so query cannot be used. The presets parameter should be written after babel loaders: ['react-hot',' babel?presets [] = react,presets [] = es2015']}}, / / add plug-in plugins: [new webpack.HotModuleReplacementPlugin ()]

Use

First run server.js (of course you can configure it in package.json and run it using npm start)

Node server.js

Then use webpack as usual

Webpack-- display-error-details-- progress-- colors-- watch read here, this article "how to use react-hot-loader" has been introduced. If you want to grasp the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.