note/2-5服务端渲染基础配置

介绍

react-dom是React专门为web端开发的渲染工具。我们可以在客户端用react-dom的render方法渲染组件，而在服务端，react-dom/server提供我们将react组件渲染成HTML的方法
服务端nodejs没有document.body对象的

首先要把服务端渲染的内容插入到index.html的body中，然后在把整个的html返回到浏览器端，这样才能把整个浏览器渲染完成

目录结构

image.png

添加的依赖

"dependencies": {
    "express": "^4.16.2"
 }

webpack.config.client.js 代替webpack.config.js

  const path = require('path')
const webpack = require('webpack')
// 在浏览器中打开页面需要引入
const HTMLPlugin = require('html-webpack-plugin')

module.exports = {
  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')
    })
  ]
}

webpack.config.server,js

const path = require('path')

module.exports = {
  // js打包出来的内容是在哪一个执行环境中运行的，还可以是web，web是在浏览器中执行的
  target: 'node',
  entry: {
    app: path.join(__dirname, '../client/server-entry.js'),
  },
  output: {
    // []表示一个变量 hash如果有变动就刷新浏览器缓存 否则不刷新
    // node环境中没有缓存这一概念 所以不需要用hash命名
    filename: 'server-entry.js',
    // path.join根路径下的绝对路径  拼接处生成文件存放路径
    path: path.join(__dirname, '../dist'),
    // 静态资源引用时的路径， 设置之后表示请求的是否是静态资源
    publicPath: '/public',
    // 打包出来的js使用的模块的方案
    libraryTarget: 'commonjs2'
  },
  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')
        ]
      }
    ]
  }
}

app.js

// 只要有jsx代码就需要引入react。jsx代码最终编译出来是React.creaeElemnt()
import React from 'react'
//用来react组件渲染到dom中，还有react-native 是渲染到手机app中的
import ReactDOM from 'react-dom'
import App from './App.jsx'
// 直接挂在到body上，一般不建议这样
// 如果使用了服务端渲染就要使用hydrate，因为react回去对比服务端和客户端的代码，
// 如果不一致，则会使用客户端的
ReactDOM.hydrate(, document.getElementById('root'))

server.entry.js

import React from 'react'
import App from './App.jsx'
export default 

template.html

server.js

// server端要把生成的html文件读进来
const express = require('express')
const ReactSSR = require('react-dom/server')
const serverEntry = require('../dist/server-entry').default
const fs = require('fs')
const path = require('path')
const template = fs.readFileSync(path.join(__dirname, '../dist/index.html'),'utf-8')
const app = express()
// 给静态文件指定固定的请求范围
app.use('/public', express.static(path.join(__dirname, '../dist')))
// 从客服端发出的所有请求都返回appString
app.get('*', function (req, res) {
    const appString = ReactSSR.renderToString(serverEntry)
    res.send(template.replace('', appString))
})
// 监听3333端口
app.listen(3333, function () {
  console.log('server is listening on 3333')
})

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:client": "webpack --config build/webpack.config.client.js",
    "build:server": "webpack --config build/webpack.config.server.js",
    "clear": "rimraf dist",
    "build": "npm run clear && npm run build:client && npm run build:server",
    "start": "node server/server.js"
  },