詳解react-webpack2-熱模塊替換[HMR]

更新時間：2017年08月03日 11:43:05 作者：mjzhang1993

這篇文章主要介紹了詳解react-webpack2-熱模塊替換[HMR]，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

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

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)境打包代碼
      // 然后連接到指定服務器域名與端口，可以換成本機ip

      'webpack/hot/only-dev-server',
      // 為熱替換(HMR)打包好代碼
      // only- 意味著只有成功更新運行代碼才會執(zhí)行熱替換(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'; // 子級路由配置

  // 創(chuàng)建一個增強版的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 節(jié)點
  const mountNode = document.getElementById('app');

  // react 的插件，提供onTouchTap()
  injectTapEventPlugin();

  // 封裝 render 函數(shù)
  const render = (Component) => {
    ReactDOM.render((
      <AppContainer>
        <Component/>
      </AppContainer>
    ), mountNode);
  };

  // 初始化調(diào)用
  render(Root);

  // 配置需要熱模塊替換的條件
  if (module.hot && process.env.NODE_ENV !== 'production') {
    // 處理對特定依賴的更改
    module.hot.accept('./containers/Root', (err) => {
      if (err) {
        console.log(err);
      }
      // 從DOM 中移除已經(jīng)掛載的 React 組件 然后重裝
      ReactDOM.unmountComponentAtNode(mountNode);
      render(Root);
    });
  }

以上就可以使用 webpack 2 模塊熱替換，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: