浏览器同步不重新呈现 EJS 部分文件

Question

我正在使用 Webpack 和 Express 的浏览器同步来开发一个使用 EJS 模板的简单网站。除了浏览器同步在重新加载浏览器时似乎没有呈现新更新的 EJS 部分之外，一切都工作正常。

但是，它确实注意到部分文件发生了变化，当我保存更改时，它会重新加载浏览器 window。

我尝试使用多个路径，从 **/*.ejs 到使用数组直接设置文件夹，如下所示：

        new BrowserSyncPlugin({
            files: ['src/views/pages/index.ejs', 'src/views/pages/partials/header.ejs'],
            proxy: `https://localhost:${process.env.PORT}`
        }),

我感觉这可能与浏览器同步、Html Webpack 插件或 EJS Webpack 加载器存在某种冲突。相关配置行如下：

        new BrowserSyncPlugin({
            files: ['src/views/pages/index.ejs', 'src/views/pages/partials/header.ejs'],
            proxy: `https://localhost:${process.env.PORT}`
        }),
        new HtmlWebpackPlugin({
            template: 'ejs-webpack-loader!src/views/pages/index.ejs',
            filename: 'index.html',
            domain: process.env.DOMAIN
        }),

并且，为了提供一些上下文，header.ejs 文件包含如下：

        <%- include partials/header.ejs %>

我认为这与其中一个加载程序有关，因为浏览器同步实际上是在注意到更改并重新加载页面。加载器根本不重新渲染包含。但是，如果我直接更改 index.ejs 它实际上会重新呈现更改。

提前谢谢你。

编辑：

我的 Express 服务器配置如下：

require('dotenv').config({path: './.env'});
const express = require('express');
const app = express();
const WebpackDevMiddleware = require('webpack-dev-middleware');
const https = require('https');
const fs = require('fs');
const config = require('../webpack.dev');
const helmet = require('helmet');
const webpack = require('webpack');
const compiler = webpack(config);

const {
    SSL_CERT,
    SSL_KEY,
    SSL_PW,
    PORT
} = process.env;
const httpsOptions = {
    key: fs.readFileSync(SSL_KEY),
    cert: fs.readFileSync(SSL_CERT),
    passphrase: SSL_PW
};
const secureServer = https.createServer(httpsOptions, app);
app.use(helmet());

app.use(WebpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
    reload: true
}));

const listener = secureServer.listen(PORT, () => console.log(`Connected on ${listener.address().port}`));

另一个注意事项，如果我保存 index.ejs 它将呈现对子项所做的更改。

Answer 1

这里'devServer'的配置请参考：

 devServer: {
        open: true,
        contentBase: path.resolve(`src`), // Specify your source path
        inline:true,
        watchContentBase: true, // Must be true
        port: 4000,
        host: "127.0.0.1",
        overlay: {
            errors: true,
            warnings: false
        },
    },

Answer 2

问题在于 ejs-webpack-loader 插件未处理包含文件的重新呈现。

为了解决这个问题，有必要使用标准的 webpack require() 方法。

所以，我的 index.ejs 文件现在看起来如下：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-GB"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <%- include partials/head.ejs %> 
        <title>Making Stuffs | Coming Soon Boilerplate</title>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <%- require ('ejs-webpack-loader!./partials/navbar.ejs')() %>
        <%- require ('ejs-webpack-loader!./partials/intro.ejs')() %> 
        <%- require ('ejs-webpack-loader!./partials/about.ejs')() %> 
        <%- require ('ejs-webpack-loader!./partials/portfolio.ejs')() %> 
        <%- require ('ejs-webpack-loader!./partials/contact.ejs')() %> 
        <%- require ('ejs-webpack-loader!./partials/blog.ejs')() %> 
    </body>
</html>

浏览器同步不重新呈现 EJS 部分文件

Browser sync not re-rendering EJS partial files

javascript

ejs

webpack

browser-sync

html-webpack-plugin