Rumah > Artikel > hujung hadapan web > 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 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!