Quelle est l'utilisation de React-Hot-Loader

WBOY
Libérer: 2022-04-21 18:09:25
original
2358 Les gens l'ont consulté

"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".

Quelle est l'utilisation de React-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
Copier après la connexion

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

npm install --save-dev webpack-dev-server
Copier après la connexion

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()
  ]
Copier après la connexion

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
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal