快如闪电的 react-refresh

时间:2021-1-8 作者:admin

快如闪电的 react-refresh

最近被安利了最新的 react 热更新插件, 今天安利给大家
react-refresh-webpack-plugin
,目前 github 上已经有 1.4k star

介绍

  1. 热更新的意思是不用刷新页面,简单的讲,就是使用 react 编写代码时,能让修改的部分自动刷新。但这和自动刷新网页是不同的,因为 hot-loader 并不会刷新网页,而仅仅是替换你修改的部分,也就是 without losing state
  2. 这个插件官网也说了,也不是百分百稳定,不过我用了发现啥大问题

兼容性

依赖 最低 最佳
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(对于0.3.x)4.43.0(对于0.4.x+ 4.43.0+

可以看出目前版本要求很高,不过还处在第一版,希望以后能够用到老项目

安装

npm install -D type-fest
yarn add -D type-fest
pnpm add -D type-fest

使用

下面放一些常用的三种配置

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');

const isDevelopment = 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'],
  },
};

webpack-hot-middleware

webpack.dev.js

const devMode = 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')] : [],
                },
            },
        ],
    },

webpack.prod.js

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

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(),
  ]
};

测试

快如闪电的 react-refresh

从结果可以看出快如闪电,目前已经用上了暂时没发现什么大问题,希望下一步能够支持17,毕竟17是个超融合版本,老项目可以无痛升级17

本文使用 mdnice 排版

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。