var webpack = require('webpack');
var path = require('path');

var publicPath = 'http://localhost:3000/';
var hotMiddlewareScript = 'webpack-hot-middleware/client"text-align: center">

这种blob的形式可能会使得css里的url()引用的图片失效，因此建议用带http的绝对地址（这也只有开发环境会用到）。有关这个问题的详情，你可以查看github上的issue。
Express启动文件部分


接下来是Express启动文件内添加以下代码：


var webpack = require('webpack'),
 webpackDevMiddleware = require('webpack-dev-middleware'),
 webpackHotMiddleware = require('webpack-hot-middleware'),
 webpackDevConfig = require('./webpack.config.js');

var compiler = webpack(webpackDevConfig);

// attach to the compiler & the server
app.use(webpackDevMiddleware(compiler, {

 // public path should be the same with webpack config
 publicPath: webpackDevConfig.output.publicPath,
 noInfo: true,
 stats: {
 colors: true
 }
}));
app.use(webpackHotMiddleware(compiler));



以上这段代码应该位于Express的routes代码之前。其中，webpack-dev-middleware配置的publicPath应该和webpack配置文件里的一致。
webpack-dev-middleware和webpack-hot-middleware的静态资源服务只用于开发环境。到了线上环境，应该使用express.static()。
到此，client部分的目标就完成了。现在到网页里打开控制台，应该可以看到[HMR] connected的提示。这个项目中我只要求css使用HMR，如果你希望javascript也使用HMR，一个简单的做法是在entry文件内添加以下代码：


if(module.hot) {
 module.hot.accept();
}


这样，与这个entry相关的所有.js文件都会使用hot reload的形式。关于这一点的更多详情，请参考hot module replacement。
接下来是server部分。
reload和supervisor


server部分的自动刷新，会面临一个问题：自动刷新的消息通知依靠的是浏览器和服务器之间的web socket连接，但在server部分修改代码的话，一般都要重启服务器来使变更生效（比如修改routes），这就会断开web socket连接。
所以，这需要一个变通的策略：浏览器这边增加一个对web socket断开的处理，如果web socket断开，则开启一个稍长于服务器重启时间的定时任务（setTimeout），相当于等到服务器重启完毕后，再进行一次整页刷新。
reload是一个应用此策略的组件，它可以帮我们处理服务器重启时的浏览器刷新。
现在，还差一个监听server文件，如果有变更就重启服务器的组件。参考reload的推荐，我们选用supervisor。
下面将reload和supervisor引入到Express项目内。
监听文件以重启服务器


通过以下代码安装supervisor（是的，必须-g）：


npm install supervisor -g


然后，在package.json里设置新的scripts：


"scripts": {
 "start": "cross-env NODE_ENV=dev supervisor -i client app"
}


这里的主要变化是从node app改为supervisor -i client app。其中-i等于--ignore，这里表示忽略client，显然，我们可不希望在改前端代码的时候服务器也重启。
这里的cross-env也是一个npm组件，它可以处理windows和其他Unix系统在设置环境变量的写法上不一致的问题。
把会重启的服务器和浏览器关联起来


把Express启动文件最后的部分做这样的修改：


var reload = require('reload');
var http = require('http');

var server = http.createServer(app);
reload(server, app);

server.listen(3000, function(){
 console.log('App (dev) is now running on port 3000!');
});



Express启动文件的最后一般是app.listen()。参照reload的说明，需要这样用http再增加一层服务。
然后，再到Express的视图文件views里，在底部增加一个<script>：


<% if (env !== "production") { %>
 <script src="/UploadFiles/2021-04-02/reload.js">

所有的views都需要这样一段代码，因此最好借助模板引擎用include或extends的方式添加到公共位置。
这里的reload.js和前面webpack的开发环境bundle.js并不冲突，它们一个负责前端源文件变更后进行编译和刷新，另一个负责在服务器发生重启时触发延时刷新。
到此，server也完成了。现在，修改项目内的任意源文件，按下ctrl + s，浏览器里的页面都会对应地做一次“适当”的刷新。
完整示例


完整示例已经提交到github：express-webpack-full-live-reload-example
效果如下：

附加的可选方案


前面说的server部分，分为views和routes，如果只修改views，那么服务器并不需要重启，直接刷新浏览器就可以了。
针对这样的开发情景，可以把views文件的修改刷新变得更快。这时候我们不用reload和supervisor，改为用browsersync，在Express的启动文件内做如下修改：


var bs = require('browser-sync').create();
app.listen(3000, function(){
 bs.init({
 open: false,
 ui: false,
 notify: false,
 proxy: 'localhost:3000',
 files: ['./server/views/**'],
 port: 8080
 });
 console.log('App (dev) is going to be running on port 8080 (by browsersync).');
});


然后，使用browsersync提供的新的访问地址就可以了。这样，修改views（html）的时候，由browsersync帮忙直接刷新，修改css和javascript的时候继续由webpack的middleware来执行编译和刷新。
结语


有了webpack后，没有自动刷新怎么干活？
说起来，能做出像这样的全栈刷新，大概也是得益于Express和Webpack都是javascript，可以很容易地结合、协作的缘故吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。