7

テンプレートに Twig を使用するプロジェクトがあります。その中のすべてのデータは静的ですが、わかりやすくするためにページの一部を他の twig ファイル内に分離しました (そうしないと、1 つのファイルに何百行ものマークアップが含まれることになります)。

HTML Webpackプラグインとともに、ビルドツールとしてwebpackを使用しています。

たとえば、次のものがあるとします。

ビュー/index.html

<h1>This is my main index page</h1>    
{% includes './welcome/hello.html' %}

ビュー/ようこそ/hello.html

<p>Hello from the templated page.</p>

今私がしたいのは、webpack を使用して任意の js、css をバンドルし、HTML Webpack プラグインを使用して HTML ページを作成し、それらのスタイルとスクリプトを挿入することです。

dist/index.html
dist/bundle.js
dist/styles.css

私のdist/index.htmlでは、生成された html ページが HTML として表示される次のようなものを期待していました。

dist/index.html

<h1>This is my main index page</h1>
<p>Hello from the templated page.</p>

ただし、私が得ているのは、「インクルード」テンプレートがまだ表示されている次のようなものです。

dist/index.html

<h1>This is my main index page</h1>
{% includes './welcome/hello.html' %}

テンプレートをコンパイルできない場合、Html Webpack プラグインを使用してすべてのテンプレートをコピーすることはできますか (すべてのテンプレート ファイルのディレクトリ全体を/distにコピーして、パスを維持します)?

ありがとう！

4

1 に答える 1

2

使用できますejs-render-loader。パッケージを参照してください。

 // webpack
         new HtmlWebpackPlugin({
                filename: 'a.html',
                hash: true,
                template: 'ejs-render?a.ejs',
         })
 // a.ejs
    <%- include components/menu -%>

 // components/menu.ejs
    <p>hei hei hei hei</p>

.htmltoファイルを変更できると思い.ejsます。上記のようなプラグインを使用します。

于 2016-10-13T02:51:32.050 に答える