The React-refresh webpack-plugin is now available on Github with 1.4K stars. The react-refresh webpack-plugin is available on Github with 1.4k stars

introduce

  1. Hot update means that you don’t need to refresh the page. In simple terms, when you write code with React, changes are automatically refreshed. However, this is different from automatically refreshing the web page, because hot-loader does not refresh the web page, but only replaces what you have changed, without losing State
  2. The plugin website also says that it is not 100% stable, but I used it to find any major problems

compatibility

Rely on The minimum The best
react 16.9.0 16.13.0 +
react-dom 16.9.0 16.13.0 +
react-reconciler 0.22.0 0.25.0 +
webpack 4.0.0 (for 0.3.x) 4.43.0 (for 0.4.x+ 4.43.0 +

As you can see, the current version is very demanding, but it’s still in the first version, so hopefully you can use the old project in the future

The installation

npm install -D type-fest
yarn add -D type-fest
pnpm add -D type-fest
Copy the code

use

Here are three common configurations

webpack-dev-server

// package.json "start": "webpack-dev-server --hot",
const path = require('path');
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

constisDevelopment = process.env.NODE_ENV ! = ='production';  module.exports = {  mode: isDevelopment ? 'development' : 'production'. entry: {  main: './src/index.js'. },  module: {  rules: [  {  test: /\.jsx? $/. include: path.join(__dirname, 'src'),  use: 'babel-loader'. }, ]. },  plugins: [  isDevelopment && new ReactRefreshPlugin(),  new HtmlWebpackPlugin({  filename: './index.html'. template: './public/index.html'. }),  ].filter(Boolean),  resolve: {  extensions: ['.js'.'.jsx']. }, }; Copy the code

webpack-hot-middleware

webpack.dev.js

constdevMode = process.env.NODE_ENV ! = ='production';
// ...
    {
        test: /\.(jsx|js)$/.        exclude: /node_modules/. use: [  {  loader: require.resolve('babel-loader'),  options: {  plugins: devMode ? [require.resolve('react-refresh/babel'] : [], },  }, ]. },  Copy the code

webpack.prod.js

constdevMode = process.env.NODE_ENV ! = ='production';
// ...
    plugins: [
        / /... .
        new webpack.HotModuleReplacementPlugin(),
 devMode && new ReactRefreshWebpackPlugin(), ]. Copy the code

ts

module.exports = {
  mode: isDevelopment ? 'development' : 'production'.  entry: {
    main: './src/index.tsx'.  },
 module: {  rules: [  {  test: /\.tsx? $/. include: path.join(__dirname, 'src'),  use: [  isDevelopment && {  loader: 'babel-loader'. options: { plugins: ['react-refresh/babel']}, },  {  loader: 'ts-loader'. options: { transpileOnly: true },  },  ]  }, ]. },  plugins: [  isDevelopment && new ReactRefreshPlugin(),  ] }; Copy the code

test


We can see from the results that it is as fast as lightning. Currently, we have used it and found no major problems. I hope we can support 17 in the next step, after all, 17 is a super-converged version, and the old project can be upgraded painlessly

This article is formatted using MDNICE