我正在寻找构建一个单页应用程序,但我想将我的登录脚本分开,以便用户在登录之前不必下载整个应用程序。我还想刷新他们登录时的页面,以允许浏览器正确检测以保存密码。我可以让它在生产中正常工作,因为它创建了包含所有文件的 dist/ 文件夹,但是我在为我的开发环境设置它时遇到了问题。我收到一条错误消息,说它找不到我的 signin.html 视图。我正在使用 webpack-dev-middleware 并将 serverSideRender 设置为 true 并将 index 设置为 false。
if(process.env.DEVELOPMENT) {
const webpack = require('webpack');
const middleware = require('webpack-dev-middleware');
const options = require('../webpack.dev.js');
app.use(middleware(webpack(options), {
serverSideRender: true,
index: false,
}));
}
app.use(express.static('dist'));
app.set('views', path.resolve(__dirname, '../dist'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.get('/*', async (req, res) => {
if(req.isAuthenticated()) {
// Load main app
res.render('index.html');
} else {
// Load just the signin
res.render('signin.html');
}
});
然后我有两个 HtmlWebpackPlugin 为登录和主应用程序创建一个页面,并将其设置为加载每个页面的特定块:
module.exports = {
entry: {
app: path.resolve(__dirname, 'app', 'app.js'),
signin: path.resolve(__dirname, 'app', 'signin.js'),
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
}),
new HtmlWebpackPlugin({
template: './app/template.html',
filename: 'index.html',
chunks: ['app'],
}),
new HtmlWebpackPlugin({
template: './app/template.html',
filename: 'signin.html',
chunks: ['signin']
}),
],
resolve: {
alias: {
src: path.resolve(__dirname, './app/'),
},
},
}
然后我有一个开发 webpack 配置:
const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
mode: "development",
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash:20].js',
}
});
当我启动服务器时,它会告诉我它找不到视图 HTML:
Failed to lookup view "signin.html" in views directory "C:\Users\Joe\projects\testapp\dist"
如果我删除“index:false”行,它会加载我的主应用程序代码,但无论他们转到哪个页面,它总是会加载 index.html,这似乎也破坏了我拥有 API 页面的能力,因为它总是呈现主应用程序。
我将如何使用开发中间件为具有不同块或捆绑包的不同页面提供服务?我很确定需要服务器端渲染,但是关于它的文档并不多。由于文件都存储在内存中而不是文件夹中,你如何引用它们res.render()
?