首页 > 代码库 > webpack-dev-middleware 和 webpack-hot-middleware 实现express全栈热更新。

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

    场景:

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‘,
    },

 

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