Container can HMR,but redux can`t HMR
wd2010 opened this issue · comments
In my webpack demo, I use router4+react16 . In my container , it can replace not refresh the whole page,but when i reset my reducer, it can`t replace and not reload.
The link of the demo the link is https://github.com/wd2010/webpack-demo
##my webpack.config.js
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin"),
HtmlWebpackPlugin=require('html-webpack-plugin'),
ProgressBarPlugin = require('progress-bar-webpack-plugin');
const path=require('path');
const webpack=require('webpack');
import { ReactLoadablePlugin } from 'react-loadable/webpack';
const DIR_NAME=path.join(__dirname,'../');
const config={
context: DIR_NAME,
entry:{
bundle: ['./client/app.js','webpack-hot-middleware/client?path=/__webpack_hmr'],
vendor: ['react','react-dom','redux','react-redux'],
},
output:{
path: path.resolve(DIR_NAME,'./dist/client'),
filename: '[name].js',
chunkFilename: 'chunk.[name].js',
publicPath:'/'
},
resolve: {extensions: ['.js', '.jsx' ,'.json', '.scss']},
module:{
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader:'babel-loader',
options:{
presets: ['env', 'react', 'stage-0','react-hmre'],
plugins: ['transform-runtime', 'add-module-exports','syntax-dynamic-import','react-loadable/babel'],
cacheDirectory: true,
}
}
},{
test: /\.html$/,
exclude:/node_modules/,
loader: 'html-loader'
}
],
},
plugins:[
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new ProgressBarPlugin({summary: false}),
new webpack.optimize.CommonsChunkPlugin({
names:['vendor','manifest'],
filename:'[name].js',
}),
new HtmlWebpackPlugin({
filename: '../views/dev/index.html',
template: './views/tpl/index.html',
chunks: ['vendor','manifest', 'bundle'],
}),
new ReactLoadablePlugin({
filename: './views/dev/react-loadable.json',
}),
],
}
module.exports=config
##configureStore.js
import {createStore, applyMiddleware,compose} from "redux";
import thunkMiddleware from "redux-thunk";
import createHistory from 'history/createMemoryHistory';
import { routerReducer, routerMiddleware } from 'react-router-redux'
const routerReducers=routerMiddleware(createHistory());//路由
const composeEnhancers = !!(typeof document !== 'undefined' && window)? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
const middleware=[thunkMiddleware,routerReducers];
let configureStore=({initialState,rootReducer})=>createStore(rootReducer,initialState,composeEnhancers(applyMiddleware(...middleware)));
export default configureStore;
##app.js (the entry file)
import React from 'react';
import {hydrate} from 'react-dom';
import configureStore from './store/configureStore';
import createHistory from 'history/createBrowserHistory'
import createApp from './store/createApp';
import Loadable from 'react-loadable';
import rootReducer from './store/reducers/index.js';
const initialState = window.__INITIAL_STATE__;
const store=configureStore({initialState,rootReducer})
const history=createHistory()
//热加载配置
if(module.hot) {
module.hot.accept('./store/reducers/index.js', () => {
import('./store/reducers/index.js').then(newReducer=>{
store.replaceReducer(newReducer)
});
});
}
const render=()=>{
let application=createApp({store,history});
hydrate(application,document.getElementById('root'))
}
window.main = () => {
Loadable.preloadReady().then(() => {
render()
});
};
[HMR] connected
bundle.js:6781 [HMR] bundle rebuilding
bundle.js:6789 [HMR] bundle rebuilt in 180ms
bundle.js:7715 [HMR] Checking for updates on the server...
bundle.js:7788 [HMR] Updated modules:
bundle.js:7790 [HMR] - ./client/store/reducers/home.js
bundle.js:7790 [HMR] - ./client/store/reducers/index.js
bundle.js:7795 [HMR] App is up to date.
bundle.js:6781 [HMR] bundle rebuilding
bundle.js:6789 [HMR] bundle rebuilt in 195ms
bundle.js:7715 [HMR] Checking for updates on the server...
bundle.js:7788 [HMR] Updated modules:
bundle.js:7790 [HMR] - ./client/store/reducers/home.js
bundle.js:7790 [HMR] - ./client/store/reducers/index.js
bundle.js:7795 [HMR] App is up to date.
bundle.js:6781 [HMR] bundle rebuilding
bundle.js:6789 [HMR] bundle rebuilt in 175ms
bundle.js:7715 [HMR] Checking for updates on the server...
bundle.js:7788 [HMR] Updated modules:
bundle.js:7790 [HMR] - ./client/store/reducers/home.js
bundle.js:7790 [HMR] - ./client/store/reducers/index.js
bundle.js:7795 [HMR] App is up to date.
Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!