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

其他 2019-06-22 17:46:18 阅读次数: 0

下面继续配置 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))
        })
    })
}

转载于:https://www.cnblogs.com/xiaozhumaopao/p/10992743.html

猜你喜欢

转载自blog.csdn.net/weixin_34101784/article/details/93222517
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022