用于登录和主应用程序的 Webpack 开发中间件单独的页面

编程问答 2022-05-17

问题描述

我希望构建一个单页应用程序，但我希望将我的登录脚本分开，以便用户在登录之前不必下载整个应用程序。我也希望在他们登录时刷新页面以允许浏览器正确检测以保存密码。我可以让它在生产中正常工作，因为它创建了包含所有文件的 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,'signin.js'),},plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',}),new HtmlWebpackPlugin({
      template: './app/template.html',filename: 'index.html',chunks: ['app'],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() 引用它们？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptwebpackwebpackwebpackwebpack-dev-middleware