Javascript ReactRefreshWebpackPlugin和WebpackPluginServe存在问题-更改仅在页面刷新后可见
我有一个问题,我总是使用WebpackDevServer和react HotDOM,但在webpack5之后它就停止了工作。 不幸的是,在运行webpack之后——观察,对上述配置的反应不是“实时刷新”,而是在页面刷新之后——所有更改都是可见的。ReactRefreshWebpackPlugin的问题是不是还没有准备好生产?或者是因为wsl2 Webpack.config:Javascript ReactRefreshWebpackPlugin和WebpackPluginServe存在问题-更改仅在页面刷新后可见,javascript,reactjs,typescript,webpack,Javascript,Reactjs,Typescript,Webpack,我有一个问题,我总是使用WebpackDevServer和react HotDOM,但在webpack5之后它就停止了工作。 不幸的是,在运行webpack之后——观察,对上述配置的反应不是“实时刷新”,而是在页面刷新之后——所有更改都是可见的。ReactRefreshWebpackPlugin的问题是不是还没有准备好生产?或者是因为wsl2 Webpack.config: const path = require('path'); const HtmlWebpackPlugin = requi
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const { WebpackPluginServe: ServePlugin } = require('webpack-plugin-serve');
const outputPath = path.resolve(__dirname, 'build');
module.exports = {
mode: 'development',
watch: true,
entry: {
main: ['webpack-plugin-serve/client', './src/index.tsx'],
},
output: {
path: outputPath,
filename: 'bundle.[contenthash].js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
include: path.join(__dirname, 'src'),
use: "babel-loader",
}, {
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new ServePlugin({
static: outputPath,
status: true,
}),
new ReactRefreshWebpackPlugin({
overlay: {
sockIntegration: 'wps',
},
}),
new HtmlWebpackPlugin({
title: "Pixelart",
template: './index.html',
})
],
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
}
};
babel.config
module.exports = (api) => {
// This caches the Babel config
api.cache.using(() => process.env.NODE_ENV);
return {
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
// Applies the react-refresh Babel plugin on non-production modes only
plugins: ['react-refresh/babel']
};
};