HtmlWebpackPlugin は webpack 出力ディレクトリに何も出力しません: 私はこの設定をしています:

ただし、index.html ファイルは public に出力されません。

次のメッセージが表示されます。

これは私のwebpack構成です：

私のindex.ejsファイル：

私のフォルダ構造：

HTMLファイルをモジュール化したいので、それらを含めたい...

別のテンプレートを含む多くの方法を試しましたが、どれもうまくいきませんでした...

どうすればこれを機能させることができるか、誰かが私にアイデアを与えることができますか?

私は最近、すべてnode_modulesを消去して、新たに作成しましたnpm install。そして、このエラーが発生し続けます:

何が起こっているのかわからない... のすべてのバージョンを変更しようとしました: html-webpack-plugin、バージョン管理の問題だwebpackとhandlebars-loader思います。そうではないようです。何か案は？

どこから来たの

私はかなり長い間 webpack を使用してきましたが、スターター キットを変更せずにすべてをゼロからセットアップしようとするのはこれが初めてです。

私は、survivorjs.com のこの素晴らしい記事をたどり、そこで説明されているいくつかのアプローチを継承して、以前のセットアップのいくつかと組み合わせました (送信されたプロダクション変数に応じて異なる名前とパスを設定するなど)。

講義中は、追跡できない予期しない動作に巻き込まれないように、できるだけ「ビルド」と「開始」を実行するようにしました。これはうまくいきました。

その後、サードパーティのフレームワークから未使用の css を除外する 方法についての章をいじっているうちに、どういうわけか開発サーバーのセットアップを壊してしまいました。("run build"まだ動作します!)

問題

私のホット サーバーは 192.168.1.2:3000 で定義されています (これが私の望みです)。webpack-dev-server以下に示す設定で実行すると、その場所で404 ( Cannot GET / ) が返されます。今、私はwebpack devサーバーを正しくセットアップする方法について多くのことを読みましたが、まだ正しく理解できていません...(ほとんどの場合、ここだけではありません...)パスが機能します。

これは私の理解です（一般的な開発サーバーのセットアップ）：

（これについて間違っている場合は助けてください）

• 私の出力パスは、開発webpack.config.jsサーバーの実行中にメモリ内でのみ提供されるため、物理的には表示されません (出力がpath: path.join(__dirname, 'devServerFolder'たとえば、私が作成していない場合、プロジェクト構造のどこにもそのフォルダーが表示されない場合) )
• index.htmlmy を指す静的なフォルダーには、 withとbundle.jswith を指すフォルダーが必要です(これは、その中に作成する必要がある my である可能性があります。通常、Web 上のほとんどのセットアップでは、保存に使用される同じフォルダーが使用されます)。生産ビルドイン)publicPathcontentBasedevServerFolderindex.htmlpublic
• プラグインを使用html-webpack-pluginすると、bundle.jsがプラグインによって書き込まれるため、何かを指す必要なく自動的にそのファイルが生成されます

これらは、よく理解するのに本当に苦労している点の一部です。私はたくさん試しました。の。異なる。私の開発サーバーを再確立するために運がなければ、との設定で遊んでいる組み合わせ（最初はうまくいきました）。 コードや でビルドをコンパイルすることに問題はありません。publicPathcontentBaserun build

設定

フォルダ構造

Webpack.config.js

HtmlWebPackPlugin を使用して index.html を生成しようとしているので...

1. 新しいプロジェクトを開始しますvue init webpack-simple#1.0 vue-html-webpack
2. インストールnpm i -D html-webpack-plugin
3. index.htmlに名前を変更entry-template.html
4. 構成webpack.config.js..

私は追加します ..

しかし、Webアプリを起動するnpm run devと、404が返されます（が見つからないと思いますindex.html）

じぶんのentry-template.html

完全なソースはこちら

結果 -> https://vue-html-webpack-ogqlguavxx.now.sh/

質問

Vue 1.0 でHtmlWebpackPluginを使用するにはどうすればよいですか?

私の問題のタイトルを思いつくのは簡単ではなかったので、質問のタイトルを明確にしようとします。

質問は、Webpack と githubpages の構成に関連しています。

背景: github ( https://github.com/SomePeaceStudio/manatelpa )で angular2 を使用してテスト プロジェクトを作成しました。私は webpack でプロジェクトをビルドし、それを本番用に醜くする方法をテストしていました。

問題: ローカルでプロジェクトをビルドして提供すると、localhost:8080/ から提供され、すべてのコンテンツが localhost:8080/ から正しく読み込まれます。例:

などなど、魔法のように機能します。

「dist」フォルダーを gh-pages ブランチhttps://github.com/SomePeaceStudio/manatelpa/tree/gh-pages (プロジェクトに gh-pages を使用しています) にプッシュすると、ページへのパスは次のようになります。 https://somepeacestudio.github.io/manatelpa/ この場合、index.html を読み込みます

しかし、それは私のプロジェクトの残りを取得しようとします

からではなく：

それが見つからないのも不思議ではなく、どうすればよいかわかりません。すべての webpack ビルド構成は config/ フォルダー (common + prod) にあります。私はそれを修正する必要があります。

この問題に対処する方法がわかりません..グーグルで検索するために正しくタイトルを付ける方法さえわかりません..

index.html ページにコンテンツをロードする方法を変更する必要があります (自動的に行われます)。エレガントな解決策があれば探します。

私は、webpack と ghpages 構成のプロではありません。