Я работаю над приложением реагирования, которое скомпилировано с веб-пакетом, и я пытаюсь осуществить горячую замену модуля, поскольку теперь оно получает полную перезагрузку при каждом изменении, удаляя текущее состояние.
Я пыталсяразные подходы, module.hot
, import {hot} from 'react-hot-loader'
и import {AppContainer} from 'react-hot-loader
, но каждый раз, когда я переключаюсь на hotOnly в devServer, он показывает журнал, но DOM никогда не обновляется.В проекте используется redux и response-router-dom.
Конфигурация Webpack упрощена
devServer: {
compress: true,
historyApiFallback: true,
hotOnly: true,
inline: true,
open: true,
port: 9090,
proxy: {
'*': {
// Force update in Spring Boot
target: 'http://localhost:8081',
secure: false,
prependPath: false,
},
},
// Create proxied port to avoid collisions
public: 'http://localhost:9090',
},
devtool: 'source-map',
mode: 'development',
module: {
rules: [
{
// Check for eslint errors
enforce: 'pre',
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
fix: true,
cache: true,
failOnError: true,
},
},
{
// Compile main index
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
cacheDirectory: true,
presets: ['env', 'react', 'stage-0'],
plugins: ['react-hot-loader/babel'],
},
},
{
test: /\.css$/,
loader: [
'style-loader',
{
loader: 'css-loader',
options: {
url: false,
import: false,
},
},
],
},
],
},
plugins: [
new WriteFilePlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
],
stats: 'errors-only',
watchOptions: {
ignored: [paths.salesReactFolder, 'node_modules'],
},
Запись в Webpack
const render = (Component) => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('root'),
);
};
render(App);
// webpack Hot Module Replacement API
if (module.hot) {
module.hot.accept('./App', () => {
// eslint-disable-next-line global-require
render(require('./App'));
});
}
App.jsx
const App = () => (
<Provider store={store}>
<AppRouter />
</Provider>
);
export default hot(module)(App);
Я удалил импорт для более удобного чтения, любые идеи о том, что должно = изменить наесть ли реагирующая замена горячего модуля для правильной работы?