javascript - Webpack Dev Middleware サインインとメインアプリ用の個別のページ

Question

単一ページのアプリを構築しようとしていますが、ユーザーがサインインするまでアプリ全体をダウンロードする必要がないように、サインイン スクリプトを個別に保持したいと考えています。また、更新したいと考えています。ブラウザがパスワードを適切に検出して保存できるように、ログイン時のページ。すべてのファイルを含む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');
  }
});

次に、2 つの 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 ページを常にレンダリングするため、API ページを持つ能力を損なうようです。メインアプリ。

開発ミドルウェアを使用して、異なるチャンクまたはバンドルで異なるページを提供するにはどうすればよいですか? サーバー側のレンダリングが必要であることは確かですが、それに関するドキュメントはあまり多くありません。ファイルはすべてフォルダーではなくメモリに保存されるため、どのように参照しますres.render()か?