Apakah kegunaan react-hot-loader

"react-hot-loader" digunakan untuk menyegarkan bahagian yang diubah suai secara automatik apabila menggunakan react untuk menulis kod "hot-loader" tidak menyegarkan halaman web, tetapi menggantikan bahagian yang diubah suai Anda boleh menggunakan ". npm install --save-dev react-hot-loader" pemasangan.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah kegunaan react-hot-loader

Apakah yang dilakukan oleh hot loader? Petikan daripada tapak web rasmi ialah

Ringkasnya, apabila anda menggunakan tindak balas untuk menulis kod, bahagian yang diubah suai boleh dimuat semula secara automatik.

Tetapi ini berbeza daripada menyegarkan halaman web secara automatik, kerana pemuat panas tidak menyegarkan halaman web, tetapi hanya menggantikan bahagian yang anda ubah suai.

Pemasangan

Mula-mula, pasang react-hot-loader

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

Selain itu, hot-loader adalah berdasarkan pada webpack-dev-server , jadi masih Anda mesti memasang webpack-dev-server

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

Configure

Configure webpack-dev-server

Apabila menggunakan react -hot-loader, pertama Masih perlu membuka webpack-dev-server.

Buat pelayan.js baharu dalam direktori akar

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()
  ]

Gunakan

untuk menjalankan server.js dahulu (sudah tentu anda boleh mengkonfigurasi dalam package.json , gunakan npm start to run)

node server.js

Kemudian gunakan webpack seperti biasa

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

Pembelajaran yang disyorkan: "react tutorial video"

Atas ialah kandungan terperinci Apakah kegunaan react-hot-loader. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!