note/2-7 hot-module-replacement

目录结构

同2-6

安装的依赖

npm i react-hot-loader@next -D

.babelrc

// react-hot-loader是提供热更新的一个工具，react-hot-loader/babel表示在使用babel的情况下使用react-hot-loader
{
  "presets": [
    // loose松散的
    ["es2015", {"loose": true}],
    // 添加了react则支持编译jsx语法
    "react"
  ],
  "plugin": ["react-hot-loader/babel"]
}

app.js

// 只要有jsx代码就需要引入react。jsx代码最终编译出来是React.creaeElemnt()
import React from 'react'
//用来react组件渲染到dom中，还有react-native 是渲染到手机app中的
import ReactDOM from 'react-dom'
// 我们要用AppContainer来包裹根节点实际想要渲染的内容
import { AppContainer } from 'react-hot-loader'
import App from './App.jsx'
// 因为需要多次渲染，我们可以封装一个方法
const root = document.getElementById('root')
const render = Component => {
  ReactDOM.hydrate(
    <AppContainer>
      <Component></Component>
    </AppContainer>,
    root
  )
}
render(App)
// 如果使用了服务端渲染就要使用hydrate，因为react回去对比服务端和客户端的代码，
// 如果不一致，则会使用客户端的
// ReactDOM.hydrate(<App/>, document.getElementById('root'))
if (module.hot) {
  module.hot.accept('./App.jsx', () => {
    const NextApp = require('./App.jsx').default
    // ReactDOM.hydrate(<NextApp/>, document.getElementById('root'))
    render(NextApp)
  })
}
// 热更新的代码出现的时候，重新加载一次app.jsx，加在完成之后重新挂载

webpack.config.client.js

const path = require('path')
const webpack = require('webpack')
// 在浏览器中打开页面需要引入
const HTMLPlugin = require('html-webpack-plugin')
// 这些环境都是我们启动命令时手动配置的
const isDev = process.env.NODE_ENV === 'development'
var config = {
  entry: {
    app: path.join(__dirname, '../client/app.js'),
  },
  output: {
    // []表示一个变量 hash如果有变动就刷新浏览器缓存 否则不刷新
    filename: '[name].[hash].js',
    // path.join根路径下的绝对路径  拼接处生成文件存放路径
    path: path.join(__dirname, '../dist'),
    // 静态资源引用时的路径， 设置之后表示请求的是否是静态资源
    publicPath: '/public/'
  },
  module: {
    rules: [
      {
        test: /.jsx$/,
        // babel 编辑es6， es7， es8， jsx 编译成es5
        // babel-loader只是一个插件并不包含babel核心代码，还需要安装babel-core
        // 默认编译es6，如何配置支持jsx, 新建文件.babelrc
        loader: 'babel-loader'
      },
      // node_modules中的js代码全部都是es5，所以不需要编译了
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: [
          path.join(__dirname, '../node_modules')
        ]
      }
    ]
  },
  plugins: [
    // 生成一个html页面，webpack编译的时候把生成的所有entry都注入进去，路径是根据output的路径
    new HTMLPlugin({
      // 最终生成的dist的html会以此作为模板
      template: path.join(__dirname, '../client/template.html')
    })
  ]
}
if (isDev) {
  config.entry = {
    app: [
      // 客户端在热更新代码的时候，需要去用到的内容,这个loder把相关代码封装在patch这个模块中
      'react-hot-loader/patch',
      path.join(__dirname, '../client/app.js')
    ]
  }
  config.devServer = {
    // 0.0.0.0表示可以用localhost，127.0.0.1，本机ip任意一种方式去访问
    host: '0.0.0.0',
    port: '8888',
     // 我们启一个服务就是服务于webpack编译出来的静态文件的
    contentBase: path.join(__dirname, '../dist'),
    hot: true,
    // 如果在webpack编译的过程中有任何错误，我们让它在网页上显示一层黑色的背景，并显示错误
    overlay: {
      // 值显示出现错误的信息
      errors: true
    },
    publicPath: '/public',
    historyApiFallback: {
      index: '/public/index.html'
    }
  }
  config.plugins.push(new webpack.HotModuleReplacementPlugin())
}
module.exports = config