問題タブ [html-webpack-plugin]

私はどこにでも目を向けてきたと思いますが、手ぶらでやってきました。html-webpack-pluginソースから単一のファイルをロードするために使用してきましたindex.htmlが、クライアントにはいくつかのローカリゼーションが付属しており、それらを動的に追加できれば素晴らしいと思いました。

html-webpack-pluginというわけで、でテンプレート エンジンを使用するように切り替えようとしていますejsが、大きな問題が発生しています。

html-webpack-pluginレンダリングしてファイル化したいのですが、そのファイルにローカリゼーションの巨大なオブジェクト.ejsを与える必要があります。.ejs

私はこのようなものが欲しい：

.json次のようなローカリゼーション ファイルから取得します。

2 つの異なる ejs webpack ローダーを使用してみましたが、ejs ファイルで使用できる単純なオブジェクトを ejs ローダーに渡す方法がわかりません。

皆さんにいくつかの答えがあることを願っています:D よろしくお願いします。

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

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

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

ビュー/index.html

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

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

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

dist/index.html

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

dist/index.html

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

ありがとう！

テンプレート ファイル内の bundle.js を挿入する場所を指定する方法。bundle.js ファイルを挿入する場所を正確に制御する必要があります。

Html-webpack-plugin では、inject: 'head'|'body' のいずれかを指定できます。

2 つの css ファイル (明るいテーマと暗いテーマ) を別々に生成しようとしているので、アプリのテーマ スイッチャーを作成して、ユーザーの好みに基づいていずれかのスタイルを読み込むことができます。これをエラーなしで動作させることはできないようです。

実際にはファイルは期待どおりに作成されますが、そのうちの 1 つだけをドキュメント ヘッドに挿入したいので、両方を挿入できる限りすべてが機能します。

チャンクまたはexcludeChunksオプションを使用して、ヘッドに挿入されるファイルに影響を与えようとしていましたが、これらのオプションを使用するとエラーが発生し続けます。

webpackJsonp is not defined エラー

私は WebPack の初心者で、CSS ファイル (.app/styles/[css files...]) のディレクトリを取り、それらを 1 つの CSS ファイル (dist/styles.css) に出力できるようにしたいと考えています。

現在、すべての JavaScript ファイルは 1 つの「index_bundle.js」ファイルにコンパイルされていますが、これは完璧ですが、CSS ファイルについても同じことを達成したいと考えています。

多くの「グーグル」の後、WebPack の ExtractTextPlugin がこれに役立つはずであることがわかりましたが、これは「エントリ」プロパティに追加された 1 つの CSS ファイルに対してのみ機能します (例: entry: {style: ". /app/styles/style.css"}) をリンク タグとして html のヘッドに追加しますが、これは問題ありませんが、すべての css ファイルを 1 つの styles.css ファイルに入れて、それを html のリンクとして頭。

現在の WebPack 構成は次のようになります。

誰かが私を正しい方向に向けることができますか? それが別のプラグインまたは別のアプローチであっても。どんな助けでも大歓迎です！

編集: 私の新しい WebPack 構成は次のようになります。

Aurelia アプリケーションを System.js + JSPM から Webpack に移植しようとしています。アプリには複数のエントリ html があります: index.html、index2.html。

私は Webpack を初めて使用するので、 easy-webpack を使用して aurelia スケルトンから始め、アプリケーション固有のコードを徐々に追加しようとしました。

単一エントリの最も基本的なケースでindex.htmlは、スケルトンは非常にうまく機能しました。また、ローカル モジュールを として追加node_modulesし、同じものを で使用しましたapp。

ただし、複数のエントリの html の構成を適切にセットアップできません。これは私のwebpack.config.js（変更された部分を示す）のようです：

問題は次のとおりです。

1. index2-scriptデフォルトから除外するconfig-generate-index-htmlと、スクリプトが追加される順序がではなく にindex.htmlなり、原因になります。app.bundle.js, aurelia-bootstrap.bundle.js, ...aurelia-bootstrap.bundle.js, app.bundle.js, ...Uncaught ReferenceError: webpackJsonp is not defined...
2. 私の理解によると、エラーはeasy-webpack/config-common-chunks-simple（ラッパーアラウンドwebpack.optimize.CommonsChunkPlugin）が初期コードと共通コードをaurelia-bootstrap.bundle.js（「ブートストラップ」チャンク）にパックしたために発生します。したがって、私もなしで試しrequire('@easy-webpack/config-common-chunks-simple')({ appChunkName: 'app', firstChunk: 'aurelia-bootstrap' })ましたが、代わりに得ました
   • Uncaught TypeError: Reflect.getOwnMetadata is not a functionからaurelia-metadata.js、そして
   • Uncaught TypeError: Cannot read property 'call' of undefinedwebpack:///webpack/bootstrap <hash>モジュールが見つからないために発生したと思われるfrom 。

次に何を試すべきか完全に混乱しています。提案してください。

Express js と angular 2 を実行するアプリがあります。webpack を使用してモジュールをバンドルし、webpack dev ミドルウェアを使用して、express で webpack を実行しています。

index.html ファイルを提供するワイルドカード ルートを持つように Express js をセットアップしましたが、localhost:8080/login にアクセスしようとすると、webpack-html-plugin は js および css アセットをまったく追加しません。

localhost:8080 (ホームページ) にアクセスすると、アセットが正しく追加されます。パブリック パスを /login/ に変更すると、ログイン ルートは機能しますが、ホームページは機能しないため、これはパブリック パスによって処理されると推測できます。

アセットを他のルートに提供する方法はありますか?

Webpack + Angular2 の間違った publicPathに非常に似ていますか?

私のレポは公開されているので、よろしければご覧ください。