使用 express + webpack 中间件时如何在 .ejs 更改时自动刷新浏览器？

Question

我已经使用 express 以及 webpack-dev-middleware 和 webpack-hot-middleware 设置了一个服务器，目前正在接受 .js 文件的模块替换。

这是我目前的设置：

server.js（后端）

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');

const config = require('./webpack.config.js');
const compiler = webpack(config);

const app = express();

let port = 3000;

app.set('views', 'views')
app.set('view engine', 'ejs');

app.use(
    express.static('public'),
    webpackDevMiddleware(compiler, {publicPath: config.output.publicPath}),
    webpackHotMiddleware(compiler)
);

app.get('/', (req, res) => {
    res.render('home-guest');
})

app.listen(port);

webpack.config.js

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

module.exports = {
    entry: [
        './public/app.js',
        'webpack-hot-middleware/client?reload=true'
    ],
    mode: 'development',
    output: {
        filename: 'bundled.js',
        path: path.resolve(__dirname, 'public'),
        publicPath: '/',
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
    ]
}

app.js（前端）

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

alert('Testing');

home-guest.ejs（查看）

Welcome to the app.

<script src="bundled.js"></script>

对app.js 文件所做的所有更改均正确使用 HMR，即时替换，无需刷新页面。

但是，要查看home-guest.ejs 文件的更改，我必须手动刷新页面。

我知道，为了可视化 .ejs 文件上的更改，我确实需要刷新。我想做的是让服务器在检测到 .ejs 文件发生更改时自动为我刷新页面。

Answer 1

只使用 webpack 来刷新浏览器有一些问题。我的混合解决方案是使用 livereload 和 nodemon 来加载 ejs 文件和 webpack 用于其他前端文件，如浏览器 javascript、css 和/或 scss：

安装 livereload 和 connect-livereload

npm i -D livereload connect-livereload

基本配置

在你的 server.js

const express = require('express');
const livereload = require("livereload");
const connectLiveReload = require("connect-livereload");

//Livereload code
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(path.join(__dirname, "public"));
liveReloadServer.server.once("connection", () => {
  setTimeout(() => {
    liveReloadServer.refresh("/");
  }, 100);
});
app.use(connectLiveReload());
//End of livereload code

const app = express();
//...... Rest of the code in server.js ........

这里发生了什么？让我们逐行查看。

创建 livereload 服务器。

const liveReloadServer = livereload.createServer();

监视 webpack 包更改的公共文件夹。当 webpack 完成 bundle 的构建时，我们只需要刷新浏览器即可。

liveReloadServer.watch(path.join(__dirname, "public"));

监听 nodemon 的服务器重新加载以刷新浏览器。

liveReloadServer.server.once("connection", () => {
  setTimeout(() => {
    liveReloadServer.refresh("/");
  }, 100);
});

真正刷新浏览器的中间件

app.use(connectLiveReload());

其他配置

默认情况下，nodemon 不会监视 .ejs 文件或任何前端文件。问题在于我们正在刷新浏览器以监听 nodemon 的服务器重新启动。所以我们需要告诉它监视 .ejs 文件的变化，如下所示：

nodemon -e js,ejs,json

此外，由于我们正在使用 livereload 监视我们的公共文件，因此我们使用 nodemon 完全忽略公共文件夹。

nodemon.json

{
  "ignore": [
    "public"
  ]
}

应该这样做。祝你好运！