本文介紹了react-webpack2-熱模塊替換[HMR]，分享給大家，具體如下：

模塊熱替換功能會(huì)在應(yīng)用程序運(yùn)行過程中替換、添加或刪除模塊，而無需重新加載頁(yè)面。這使得你可以在獨(dú)立模塊變更后，無需刷新整個(gè)頁(yè)面，就可以更新這些模塊，極大地加速了開發(fā)時(shí)間。

babel 配置

需要先下載 npm install --save-dev react-hot-loader@3.0.0-beta.6

然后在 .babelrc 中配置

{ "presets": [  ["es2015", {"modules": false}], // webpack 2 中需要這樣配置禁用  "stage-2",  "react" ], "plugins": [  "react-hot-loader/babel"  // 開啟 React 代碼的模塊熱替換(HMR) ]}

webpack 配置

入口插入模塊熱替換

  entry: {    app: [      'react-hot-loader/patch',      // 開啟 React 代碼的模塊熱替換(HMR)      'webpack-dev-server/client?http://localhost:8080',      // 為 webpack-dev-server 的環(huán)境打包代碼      // 然后連接到指定服務(wù)器域名與端口，可以換成本機(jī)ip      'webpack/hot/only-dev-server',      // 為熱替換(HMR)打包好代碼      // only- 意味著只有成功更新運(yùn)行代碼才會(huì)執(zhí)行熱替換(HMR)      './index.js'      // 我們 app 的入口文件    ],    vendor: ['react', 'react-router']    // 公共文件打包  }

出口配置 publicPath，（必須配置）

  output: {    path: defPath.DEV_PATH,    // 所有輸出文件的目標(biāo)路徑    filename: 'js/bundle.js',    publicPath: '/',    chunkFilename: '[name].chunk.js'  },

plugins 添加相應(yīng)插件

  plugins: [    new webpack.HotModuleReplacementPlugin(),    // 開啟全局的模塊熱替換(HMR)    new webpack.NamedModulesPlugin()    // 控制臺(tái)輸出模塊命名美化  ]

devServer 配置 HMR

  devServer: {    // ... 其他配置    hot: true,    // 開啟服務(wù)器的模塊熱替換(HMR)    contentBase: defPath.DEV_PATH,    // 輸出文件的路徑    publicPath: '/'    // 和 output 的 publicPath 保持一致  }

應(yīng)用代碼中修改

應(yīng)用代碼中需要做很大的改動(dòng)

拆分原入口文件

新建一個(gè)根組件，存放原入口文件中的路由配置部分

  /*    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'; // 子級(jí)路由配置  // 創(chuàng)建一個(gè)增強(qiáng)版的history來結(jié)合store同步導(dǎo)航事件  const browhistory = syncHistoryWithStore(browserHistory, store);  const Root = () => (    <Provider store={store}>     <div>       <Router history={browhistory} routes={routes}/>     </div>    </Provider>  );  export default Root;