Webpack-dev-middleware and Webpack-hot-middleware implement express full stack hot update.

Scene:

Node Server.js starts the back-end server.

NPM Run Dev starts the front-end server.

When you need node's express framework to combine with Webpack, you'll use two dependencies on the topic.

Of course, if you just want to start webpack with node to implement the hot update, then webpack-dev-server, you can achieve! For details see: 1190000007374078;

The problem with this is that you can't find the API you wrote on the page, and there's a 404 error (because you didn't actually start your backend server).

Webpack-dev-middleware and Webpack-hot-middleware are needed at this time. Webpack-dev-middleware is a middleware for dealing with static resources, the Webpack-dev-server is a small Node.js Express server, It also uses Webpack-dev-middleware to process webpack compiled output; Webpack-hot-middleware is a middleware used in conjunction with Webpack-dev-middleware, It can implement the browser's non-refresh update (hot reload).

On the code!

Server.js

varText = require ('./db ')), Webpack= Require (' Webpack '), config= require ('./webpack.config ')), Webpackdevmiddleware= Require (' Webpack-dev-middleware '), Webpackhotmiddleware= Require (' Webpack-hot-middleware '); varcompiler =webpack (config);
Config.entry.unshift ("webpack-hot-middleware/client?reload=true?http://127.0.0.1:7777/"); Add this to the portal of the Webpack configuration file? reload=true Set whether the browser refreshes automatically;
App.use (webpackdevmiddleware (compiler, {noinfo:true, PublicPath:config.output.publicPath})) App.use (webpackhotmiddleware (compiler)) App.listen (7777);

Webpack.config.js

? reload=true        Sets whether the browser refreshes automatically;

    entry: [        './main.js '    ],    output: {        + '/',        '/',         ' index.js ',    },

The

Webpack-dev-middleware and Webpack-hot-middleware implement express full stack hot update.