webpack-dev-middleware 和 webpack-hot-middleware 实现express全栈热更新。

Posted 2020-09-19

    场景：

node server.js 启动后端服务器。

npm run dev 启动前端服务器。

当你需要node的express框架和webpack结合的时候，就会用到题上的两个依赖。

 

    当然如果只是想用node启动webpack实现热更新，那么webpack-dev-server，就可以实现！详情见：https://segmentfault.com/a/1190000007374078；

这样出现的问题就是你在页面中找不到你写的API，出现404错误（因为事实上你是没有启动你的后端服务器）

 

    这个时候就需要webpack-dev-middleware 和 webpack-hot-middleware 了。webpack-dev-middleware是一个处理静态资源的中间件，前面说的webpack-dev-server是一个小型的Node.js Express服务器,它也是用webpack-dev-middleware来处理webpack编译后的输出；webpack-hot-middleware是一个结合webpack-dev-middleware使用的middleware，它可以实现浏览器的无刷新更新（hot reload）。

 

上代码！

server.js

var text = require(‘./db‘),
    webpack = require(‘webpack‘),
    config = require(‘./webpack.config‘),
    webpackDevMiddleware = require(‘webpack-dev-middleware‘),
    webpackHotMiddleware = require(‘webpack-hot-middleware‘);

    var compiler = webpack(config);
    config.entry.unshift("webpack-hot-middleware/client?reload=true?http://127.0.0.1:7777/");  
    //将这个添加到webpack配置文件的入口里面 ?reload=true 设置浏览器是否自动刷新；

    app.use(webpackDevMiddleware(compiler, {
        noInfo: true,
        publicPath: config.output.publicPath
    }))
    app.use(webpackHotMiddleware(compiler))
    app.listen(7777);

 

webpack.config.js

// ?reload=true        设置浏览器是否自动刷新；

    entry: [
        ‘./main.js‘
    ],

    output: {
        path: __dirname + ‘/‘,
        publicPath: ‘/‘,
        filename: ‘index.js‘,
    },