【发布时间】：2020-07-16 09:22:06
【问题描述】：
我正在使用带有 Webpack 和 Express 的 Browser Sync 来开发一个使用 EJS 模板的简单网站。除了浏览器同步在重新加载浏览器时似乎没有呈现新更新的 EJS 部分之外，一切都运行良好。
但是，它确实注意到部分文件发生了变化，当我保存对它的更改时，它会重新加载浏览器窗口。
我尝试使用从**/*.ejs 到使用数组直接设置文件夹的多个路径，如下所示：
new BrowserSyncPlugin({
files: ['src/views/pages/index.ejs', 'src/views/pages/partials/header.ejs'],
proxy: `https://localhost:${process.env.PORT}`
}),
我感觉这可能与 Browser Sync、Html Webpack Plugin 或 EJS Webpack Loader 存在某种冲突。相关配置行如下：
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，它将呈现对孩子所做的更改。
【问题讨论】：
标签： javascript webpack ejs browser-sync html-webpack-plugin