详解react-webpack2-热模块替换[HMR]

{ "presets": [  ["es2015", {"modules": false}], // webpack 2 中需要这样配置禁用  "stage-2",  "react" ], "plugins": [  "react-hot-loader/babel"  // 开启 React 代码的模块热替换(HMR) ]}

  entry: {    app: [      'react-hot-loader/patch',      // 开启 React 代码的模块热替换(HMR)      'webpack-dev-server/client?http://localhost:8080',      // 为 webpack-dev-server 的环境打包代码      // 然后连接到指定服务器域名与端口，可以换成本机ip      'webpack/hot/only-dev-server',      // 为热替换(HMR)打包好代码      // only- 意味着只有成功更新运行代码才会执行热替换(HMR)      './index.js'      // 我们 app 的入口文件    ],    vendor: ['react', 'react-router']    // 公共文件打包  }

  output: {    path: defPath.DEV_PATH,    // 所有输出文件的目标路径    filename: 'js/bundle.js',    publicPath: '/',    chunkFilename: '[name].chunk.js'  },

  plugins: [    new webpack.HotModuleReplacementPlugin(),    // 开启全局的模块热替换(HMR)    new webpack.NamedModulesPlugin()    // 控制台输出模块命名美化  ]

  devServer: {    // ... 其他配置    hot: true,    // 开启服务器的模块热替换(HMR)    contentBase: defPath.DEV_PATH,    // 输出文件的路径    publicPath: '/'    // 和 output 的 publicPath 保持一致  }

  /*    Root, Router 配置  */  import React from 'react';  import {Provider} from 'react-redux';  import {browserHistory, Router} from 'react-router';  import {syncHistoryWithStore} from 'react-router-redux';  import store from '../store/index'; // 引入 配置后的 store   import routes from '../routes.js'; // 子级路由配置  // 创建一个增强版的history来结合store同步导航事件  const browhistory = syncHistoryWithStore(browserHistory, store);  const Root = () => (    <Provider store={store}>     <div>       <Router history={browhistory} routes={routes}/>     </div>    </Provider>  );  export default Root;

  /*    app/js/index.js    入口文件, 配置 webpack 热加载模块  */  import '../scss/index.scss';  import '../scss/commoncom.scss';  import React from 'react';  import ReactDOM from 'react-dom';  import {AppContainer} from 'react-hot-loader';   // 引入 react-hot-loader 提供的容器  import injectTapEventPlugin from 'react-tap-event-plugin';  // 引入总路由的配置模块  import Root from './containers/Root';  // 定义要挂载的 DOM 节点  const mountNode = document.getElementById('app');  // react 的插件，提供onTouchTap()  injectTapEventPlugin();  // 封装 render 函数  const render = (Component) => {    ReactDOM.render((      <AppContainer>        <Component/>      </AppContainer>    ), mountNode);  };  // 初始化调用  render(Root);  // 配置需要热模块替换的条件  if (module.hot && process.env.NODE_ENV !== 'production') {    // 处理对特定依赖的更改    module.hot.accept('./containers/Root', (err) => {      if (err) {        console.log(err);      }      // 从DOM 中移除已经挂载的 React 组件 然后重装      ReactDOM.unmountComponentAtNode(mountNode);      render(Root);    });  }