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    )  });}