react-hot-loader记录

1.

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2

2.

npm install --save-dev react-hot-loader@3.0.0-beta.6
或者
npm install --save-dev react-hot-loader@next

3.

.babelrc配置


{
  "presets": [
    ["es2015", {"modules": false}],
       // webpack现在已经支持原生的import语句了, 并且将其运用在tree-shaking特性上
    "stage-2",
      // 规定JS运用的语言规范层级
      // Stage 2 是 "草案", 4 是 "已完成", 0 is "稻草人(strawman)"。
      // 详情查看 https://tc39.github.io/process-document/
    "react"
      // 转译React组件为JS代码
  ],
  "plugins": [
    "react-hot-loader/babel"
      // 开启react代码的模块热替换（HMR）
  ]
}

4.

config配置：


const { resolve } = require('path');
const webpack = require('webpack');
module.exports = {
  context: __dirname,
  entry:  [
    'react-hot-loader/patch',
    'webpack/hot/only-dev-server',
    './app/main.js'
  ],
  output: {
    path: resolve(__dirname, 'build'),//打包后的文件存放的地方
    filename: "bundle.js",//打包后输出文件的文件名
    publicPath: "/"
  },
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    hot: true,
    publicPath:'/'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          'babel-loader',
        ],
        exclude: /node_modules/
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
  ],
  devtool: "cheap-eval-source-map",
};

5.

入口文件中配置：


import {AppContainer} from 'react-hot-loader'
import Redbox from 'redbox-react'
const render =  (Component) => {
  ReactDOM.render(
    <AppContainer errorReporter={Redbox}>
      <Component />
    </AppContainer>,
    document.querySelector('#odiv')
  )
};
render(App);

if(module.hot) {
  module.hot.accept('./app', () => {
    render(App)
  });
}

或者

const oEle = document.querySelector('#odiv');
render(
  <AppContainer errorReporter={Redbox}>
    <App />
  </AppContainer>,
  oEle
)

if (module.hot) {
  module.hot.accept('./app', () => {
    const NextApp = require('./app').default;
    render(
      <AppContainer errorReporter={Redbox}>
        <NextApp />
      </AppContainer>,
      oEle
    )
  });
}