最近被安利了最新的 react 热更新插件, 今天安利给大家 react-refresh-webpack-plugin,目前 github 上已经有 1.4k star了
介绍
- 热更新的意思是不用刷新页面,简单的讲,就是使用 react 编写代码时,能让修改的部分自动刷新。但这和自动刷新网页是不同的,因为 hot-loader 并不会刷新网页,而仅仅是替换你修改的部分,也就是 without losing state
- 这个插件官网也说了,也不是百分百稳定,不过我用了发现啥大问题
兼容性
依赖 | 最低 | 最佳 |
---|---|---|
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(),
]
};
测试
从结果可以看出快如闪电,目前已经用上了暂时没发现什么大问题,希望下一步能够支持17,毕竟17是个超融合版本,老项目可以无痛升级17
本文使用 mdnice 排版