webpack 配置react脚手架（二）：热更新

下面继续配置 webpack dev server    hot module replacement:

首先配置dev-server     安装     npm i webpack-dev-server -D

const isDev = process.env.NODE_ENV === 'development'

const config = {
    entry:{},
    output:{},
    plugins:{}
}

if(isDev){
    config.devServer = {
    host: '0.0.0.0', //设置 0.0.0.0 的host 可以访问 localhost，127.0.0.1，本季ip来访问
    contentBase: path.join(__dirname, '../dist'), //因为，devserver是服务打包后的文件，所以和output的path 保持一致即可
    port: '8888',
    hot: true,
    overlay: {
      errors: true //server有任何的错误，则在网页中 蒙层加提示
    }
  }
}

module.exports = config;

修改json文件： "dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js",

其中 cross-env 是兼容了win mac linux的NODE_ENV，也是一个安装包：  npm i cross-env -D

然后 npm run dev:cient 即可以启动服务 localhost:8888;

发现 app.js是无法获取到的，其路径为： http://localhost:8888/public/app.js 可以看出是多了一层 public；

根据server的配置项：contentBase 是把dev-server放在了dist目录下，开启的服务器。则 locahost:8888 相当于 dist目录，而之前output配置的输出文件前面是有路径 public的，所以 dev-server也需要增加这个配置：

if(isDev){
    config.devServer = {
    host: '0.0.0.0', //设置 0.0.0.0 的host 可以访问 localhost，127.0.0.1，本季ip来访问
    contentBase: path.join(__dirname, '../dist'), //因为，devserver是服务打包后的文件，所以和output的path 保持一致即可
    port: '8888',
    hot: true,
    overlay: {
      errors: true //server有任何的错误，则在网页中 蒙层加提示
    },
    publicPath: '/public/', //增加公共路径，对应着output的 publicPath
    historyApiFallback: {
      index: '/public/index.html' //这里是给本地服务器增加功能：因为是单页面应用，如果刷新页面，或者访问不到路由，则跳转到首页
    },
  }
}

注意：一定要把打包生成的dist目录删除掉，在执行 npm run dev:client 这时因为，服务器会先检测本地磁盘是否有dist目录，如果有就会调取这里面的文件！！

===================华丽的分割线

接下来配置 热更新 hot，

Q：webpack-dev-server 已经是热加载，为何还要在 react 项目还要安装 react-hot-loader 呢？

A：其实这两者的更新是有区别的，webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。但它需要依赖 webpack 的 HotModuleReplacement 热加载插件 （参考文章： react使用react-hot-loader实现局部热更新）

首先在 .babelrc 文件中增加 对react hot更新的配置：

{
  "presets": [
    ["es2015", { "loose": true }],
    "react"
  ],
  "plugins": [ "react-hot-loader/babel"] //使用babel的情况下，添加 react-hot-loader，支持react 热更新
}

安装包： npm i react-loader@next -D //教程中这里是最新的版本，尚未正式版，开发的时候注意版本

修改app.js 入口文件：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'

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

// module.hot 监听到 app.jsx发生变化之后，重新获取 app.jsx 为NextApp 然后重新渲染；

修改package.js文件：

const webpack = require('webpack'); //因为用到了webpack下的包  HotModuleReplacementPlugin
const config ={

}
if(isDev){
    config.entry=[
        'react-hot-loader/patch',  //入口文件中要把 hot 打包进去
        path.join(__dirname,'../client/app.js')
    ],
    config.devServer = {
        host: '0.0.0.0',
        contentBase: path.join(__dirname, '../dist'),
        port: '8888',
        hot: true, //打开这里
        overlay: {
          errors: true
        },
        publicPath: '/public/',
        historyApiFallback: {
          index: '/public/index.html'
        }
    }
    config.plugins.push(new webpack.HotModuleReplacementPlugin) //增加了这里
}

最后还要返回来在 app.js 入口文件中配置：

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './App.jsx'

ReactDOM.hydrate(<App />,document.getElementById('root'));

const root = document.getElementById('root');
const render = Component => {
    ReactDOM.hydrate(
        <AppContainer>
            <Component/>
        </AppContainer>,
        root
    )
}

render(App);
if (module.hot) {
  module.hot.accept('./App.jsx', () => {
    const NextApp = require('./App.jsx').default
    render(NextApp);
  })
}

这样才能热更新！

=================================服务端更新配置

上面书写了客户端的热更新，并且热更新的文件都存在内存中，所以服务端不能再从 dist文件夹下获取依赖的 js和 html文件，因此，服务端的js文件也需要区分是否是dev模式：

const express = require('express')
const ReactSSR = require('react-dom/server');
const fs = require('fs')
const path = require('path')
const app = express();

const isDev = process.env.NODE_ENV === 'development'; //在这里定义
if(!isDev){
    const serverEntry = require('../dist/server-entry').default;//引入的是服务端的配置打包后的js文件
    const template = fs.readFileSync(path.join(__dirname, '../dist/index.html'), 'utf8')//同步引入客户端打包生成的 html 文件，如果不使用 utf8 则是buffer文件
    app.use('/public', express.static(path.join(__dirname, '../dist'))); //给静态文件指定返回内容，这里给piblic文件夹下的内容返回的是静态文件的dist文件夹
    app.get('*', function (req, res) {
      const appString = ReactSSR.renderToString(serverEntry);
      res.send(template.replace('<!--app-->',appString)) //用返回的js文件替换掉模板中的<app>，然后发送的是模板文件
    })
}else{
    //util 文件夹下的 dev.static.js
    const devStatic = require('./util/dev.static.js');
　　 devStatic(app); //之所以这里把 app 传递进去，是因为app是 express(),我们可以在新建的文件中继续使用 app.get、app.send 等函数
}

app.listen(3333, function () {
  console.log('server is listening on 3333')
})

根据以上代码可知，把原来的从dist目录下获取文件的代码放在了 不是 dev模式下了，而dev模式下我们放在了 util/dev.static.js 文件下。

根据if else可以看出，在文件 dev.static.js 文件中我们要做的事情是：把静态文件js和模版从内存中提取出来，交给app.get请求 然后 send 出去。

接下来编辑 dev.static.js 文件，首先安装 npm i axios -S

步骤一： 获取内存中的模板html文件

const axios = require('axios');// 在浏览器端和服务器端都可以使用 axios

/*在这里从内存中获取模版html，因为每次dev-server启动的是本地的服务，url是固定的;
这样可以根据 dev-server 实时的拿到最新的 模板文件
*/
const getTemplate = () => {
    return new Promise((resolve,reject)=>{
        axios.get('http://localhost:8888/public/index.html')
        .then(res => {
            resolve(res.data); //返回的内容放在了 data中
        })
        .catch(reject)
    })
}

module.exports = function (app) {
    app.get("*",function(req,res){

    })
}

步骤二：获取。server-entry.js等bundle文件

const axios = require('axios');
//从内存中获取 js等bundle文件，启动webpack，通过webpack打包的结果，获取bundle文件。
const webpack = require('webpack');
//通过 config.server.js 文件 获取 输出文件路径等信息
const serverConfig = require('../../build/webpack.config.server.js');

const getTemplate = () => {
    return new Promise((resolve,reject)=>{
        axios.get('http://localhost:8888/public/index.html')
        .then(res => {
            resolve(res.data);
        })
        .catch(reject)
    })
}

// 通过webpack的watch方法，监听配置文件中的 entry 入口文件（及其依赖的文件）是否发生变化，一旦变化，就会重新打包（类似于热更新）
const serverCompiler = webpack(serverConfig);
serverCompiler.watch({},(err,status)=>{//status 在终端上显示的信息
    if(err) throw;
    let stats = status.toJson();
    stats.error.forEach(err => console.log(err));
    stats.waring.forEach(warn => console.warn(warn));

    const bundlePath = path.join(
        serverConfig.output.path,
        serverConfig.output.filename
    );// 获取输出文件的路径
})

module.exports = function (app) {
    app.get("*",function(req,res){

    })
}

获取到 生成的 文件名字之后需要在 内存中读取 文件：

要使用 memory-fs，所以要安装 npm i memory-fs -D;

const axios = require('axios');
const path = require('path');
const webpack = require('webpack');
const serverConfig = require('../../build/webpack.config.server.js');
// 要使用 memory-fs，所以要安装 npm i memory-fs -D;
// 在内存中读写文件，这样就可以从内存中读取 获取到的文件
const MemoryFs = require('memory-fs');

//最后要把得到的js文件，渲染到dom上去，所以要用到
const ReactDomServer = require('react-dom/server');

const getTemplate = () => {
    return new Promise((resolve,reject)=>{
        axios.get('http://localhost:8888/public/index.html')
        .then(res => {
            resolve(res.data);
        })
        .catch(reject)
    })
}

//通过module的 constructor 构造方法去创建一个新的 module
const Module = module.constructior

let serverBundle;
const mfs = new MemoryFs;//new 一个 对象；
const serverCompiler = webpack(serverConfig);
serverCompiler.outputFileSystem = mfs; //webpack 提供的配置项，其输出通过mfs内存读写，这里如果写错名字就会写到硬盘中
serverCompiler.watch({},(err,status)=>{
    if(err) throw;
    let stats = status.toJson();
    stats.error.forEach(err => console.log(err));
    stats.waring.forEach(warn => console.warn(warn));

    const bundlePath = path.join(
        serverConfig.output.path,
        serverConfig.output.filename
    );// 获取输出文件的路径
    //通过 mfs 读取文件的路径，就可以得到文件，是 string 类型的文件，无法直接使用
    const bundle = mfs.readFileSync(bundlePath,'utf-8'); //需要传入 编码格式
    const m = new Module();
    //动态编译成一个文件，需要给这个文件指定文件名字，否则无法在缓存中进行缓存，下次则拿不到该文件
    m._compile(bundle,'server-entry.js');//使用module的_compile方法将String的文件，生成一个新的 模块，转换成了真正可以读取的文件
    /*为了在后面的 app.get方法中使用。将生成的文件赋值给全局变量；
    此外，因为是在 watch中执行的，每次依赖的文件更新，输出的文件也会更新*/
    serverBundle = m.exports.default;
})

module.exports = function (app) {
    app.get("*",function(req,res){
        getTemplate().then(template => {
            const content = ReactDomServer.renderToString(serverBundle);
            res.send(template.replace('<!--app-->',content))
        })
    })
}

最后在package.json 中定义命令：

{
    "script":{
        "dev:server":"cross-env NODE_ENV = development node server/sever.js"
    }

}

启动客户端和服务器端：npm run dev:client        npm run dev:server；

发现无论是js还是html都返回的一样，所以就想之前 对静态文件的 public中做的区分，但是由于这个是在内存中，所以不同：

安装：  npm i http-proxy-middleware -D   做代理的中间件

const axios = require('axios');
const path = require('path');
const webpack = require('webpack');
const serverConfig = require('../../build/webpack.config.server.js');
const MemoryFs = require('memory-fs');
const ReactDomServer = require('react-dom/server');
//引入中间件
const proxy = require('http-proxy-middleware');

const getTemplate = () => {
    return new Promise((resolve,reject)=>{
        axios.get('http://localhost:8888/public/index.html')
        .then(res => {
            resolve(res.data);
        })
        .catch(reject)
    })
}

const Module = module.constructior

let serverBundle;
const mfs = new MemoryFs;
const serverCompiler = webpack(serverConfig);
serverCompiler.outputFileSystem = mfs;
serverCompiler.watch({},(err,status)=>{
    if(err) throw;
    let stats = status.toJson();
    stats.error.forEach(err => console.log(err));
    stats.waring.forEach(warn => console.warn(warn));

    const bundlePath = path.join(
        serverConfig.output.path,
        serverConfig.output.filename
    );
    const bundle = mfs.readFileSync(bundlePath,'utf-8');
    const m = new Module();
    m._compile(bundle,'server-entry.js');
    serverBundle = m.exports.default;
})

module.exports = function (app) {
//服务器端端口是 3333；客户端的端口是 8888；
//这里做的代理是，访问当前3333端口的public文件时，代理去请求客户端的 8888端口文件
    app.use('/public',proxy({
        target:'http://localhost:8888'
    }))

    app.get("*",function(req,res){
        getTemplate().then(template => {
            const content = ReactDomServer.renderToString(serverBundle);
            res.send(template.replace('<!--app-->',content))
        })
    })
}