美文网首页
note/2-7 hot-module-replacement

note/2-7 hot-module-replacement

作者: 胖鱼尾巴 | 来源:发表于2018-07-26 17:22 被阅读9次
    目录结构

    同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
    

    相关文章

      网友评论

          本文标题:note/2-7 hot-module-replacement

          本文链接:https://www.haomeiwen.com/subject/mhwbmftx.html