Quelle est l'utilisation de React-Hot-Loader

"react-hot-loader" est utilisé pour actualiser automatiquement les parties modifiées lors de l'écriture du code dans React ; "hot-loader" ne rafraîchit pas la page Web, mais remplace les parties modifiées. Vous pouvez utiliser "npm install --save". - installation devreact-hot-loader".

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

À quoi sert React-Hot-Loader ?

À quoi sert Hot Loader ? Une citation du site officiel est

Pour faire simple, lorsque vous utilisez React pour écrire du code, les parties modifiées peuvent être automatiquement actualisées.

Mais cela est différent de l'actualisation automatique de la page Web, car le hot-loader n'actualise pas la page Web, mais remplace uniquement les parties que vous avez modifiées.

Installation

La première étape consiste à installer React-hot-loader

npm install --save-dev react-hot-loader

De plus, hot-loader est basé sur webpack-dev-server, vous devez donc installer webpack-dev-server

npm install --save-dev webpack-dev-server

Configuration

Configurer webpack-dev-server

Lors de l'utilisation de React-hot-loader, vous devez d'abord ouvrir webpack-dev-server.

Créez un nouveau server.js dans le répertoire racine

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
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }
  console.log('Listening at http://localhost:3000/')
});
配置 webpack.config.js
然后在 webpack 的配置文件里添加 react-hot-loader。
打开 webpack.config.js
var webpack = require('webpack');
module.exports = {
  // 修改 entry
  entry: [
    // 写在入口文件之前
    "webpack-dev-server/client?http://0.0.0.0:3000",
    "webpack/hot/only-dev-server",
    // 这里是你的入口文件
    "./src/app.js",
  ],
  output: {
    path: __dirname,
    filename: "build/js/bundle.js",
    publicPath: "/build"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        // 在这里添加 react-hot，注意这里使用的是loaders，所以不能用 query，应该把presets参数写在 babel 的后面
        loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
      }
    ]
  },
  // 添加插件
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]

Utilisez

Première exécution de server.js (bien sûr, vous pouvez le configurer dans package.json et utiliser npm start pour l'exécuter)

node server.js

Ensuite, utilisez webpack comme d'habitude

webpack --display-error-details --progress --colors --watch

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!