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

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

模块热替换功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载页面。这使得你可以在独立模块变更后，无需刷新整个页面，就可以更新这些模块，极大地加速了开发时间。

webpack3 react-router4 热模块替换 看这里
react16 + react-router4 + webpack开发环境搭建

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 模块热替换