問題タブ [pug-loader]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
webpack - pug テンプレートをプリコンパイルし、htmlWebpackPlugin.options へのアクセスを保存します
Webpack プロジェクトのテンプレート エンジンとしてからejsに移行することにしました。pugそして、私が必要としているのは、事前にコンパイルされた静的出力です (dev または prod モードのいずれかで)。さらに、コンパイル プロセスを通じてデータをテンプレートに渡す必要があり、そのためhtmlWebpackPluginにカスタム オプションを使用します。プロジェクトの構造は次のとおりです。
私が見つけて試した最初の方法は、エントリ ポイントにデータを渡すことです (でローカルをコンパイルしindex.js、を介してページに挿入しますinnerHTML =)。この方法は、ランタイム HTML 挿入なしで 100% プリコンパイルされた静的出力が必要なため、私にはまったく適していません。そして、楽しみが始まります...
たとえば、ナビゲーションを作成する必要があります。次のようなナビゲーションのスキーマがあります。
そしてこれのためにパーシャルパグapp/views/includes/nav.pug：
そのパーシャルは共通のレイアウトに含まれていますlayout.pug:
変数app/views/includes/nav.pugを補間することを期待して。nav
module -> rules -> loaderしたがって、HTMLWebpackPlugin への使用とインライン ローダーの2 つのケースを発見しました。
1番目。webpack.config.js設定：
この場合、オプションhtmlWebpackPluginをテンプレートに渡すことができません。で述べたように、オプションからフィールドとフィールドlayout.pugを破棄しようとすると、コンパイル エラーが発生します。titlenavCannot read property 'options' of undefined
2番目のケース。webpack.config.js:
このアプローチは、含まれるパーシャルが含まれなくなるまで、layout.pugから取得したオプションで完全にコンパイルされます。そして、対応するパーシャルに my を渡し、そこから nav をレンダリングする必要があります。そして、理解できず、ローダーが必要であるかのように、部分的にコンパイルにエラーをスローし始めます。htmlWebpackPluginnavpug
私は完全に混乱しています。引き返すejs気はありませんが、答えが見つからない場合は引き返す必要があるようです。
よろしくお願いします。