本文介紹了react-webpack2-熱模塊替換[HMR]，分享給大家，具體如下：
模塊熱替換功能會在應用程序運行過程中替換、添加或刪除模塊，而無需重新加載頁面。這使得你可以在獨立模塊變更后，無需刷新整個頁面，就可以更新這些模塊，極大地加速了開發時間。
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 的環境打包代碼 // 然后連接到指定服務器域名與端口，可以換成本機ip 'webpack/hot/only-dev-server', // 為熱替換(HMR)打包好代碼 // only- 意味著只有成功更新運行代碼才會執行熱替換(HMR) './index.js' // 我們 app 的入口文件 ], vendor: ['react', 'react-router'] // 公共文件打包 }出口配置 publicPath，（必須配置）
output: { path: defPath.DEV_PATH, // 所有輸出文件的目標路徑 filename: 'js/bundle.js', publicPath: '/', chunkFilename: '[name].chunk.js' },plugins 添加相應插件
plugins: [ new webpack.HotModuleReplacementPlugin(), // 開啟全局的模塊熱替換(HMR) new webpack.NamedModulesPlugin() // 控制臺輸出模塊命名美化 ]
devServer 配置 HMR
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); }); }以上就可以使用 webpack 2 模塊熱替換，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
