問題タブ [webpack-html-loader]

私はheader.htmlファイルを持っています

そしてindex.html、このheader.htmlを含めたいファイルもあります。

私の index.html は次のようになります。

私はこれを使用していますwebpack.config.js：

次のように header.html をインクルードしようとしました:

そしてこれも：

次の行で js/index.js ファイルにインポートしようとしました:

...これと組み合わせる：

この：

しかし、何も機能しません。${require ...}コードを index.html のプレーン テキストとして返すだけで、何も含まれていません。

header.html ファイルを含める方法はありますか?

この問題を解決するために作成したリポジトリは次のとおりです: https://github.com/DevCubeHD/WebpackStaticPage

まず、ファイル構造。慣例ではない場合に備えて、私の例を理解するために知っておくべき重要なフォルダーが 2 つあります。フォルダーはすべての/src生のコンテンツが/dist移動する場所であり、フォルダーはデフォルトで圧縮された Web サイトが移動する場所です。そこから、任意のサーバーにデプロイする準備が整います。とにかく開発にこのディレクトリが必要かどうかはわかりませんが、そうであることを願っています。

本番用と開発用に 2 つの webpack スクリプトをセットアップしようとしています。プロダクションは正常に動作します: スクリプトがトラフを実行し、ページが に配置され/distます。

開発中は、webkit hotloader を使用して、ページに変更を加えたときにすぐに変更を適用したいと考えています。それは実行され、出力は非常に良いように見えますが、ページになるとスタックし[WDS] App hot update...てコンテンツを更新しません. ページを更新しても、コンテンツは古いままです。役立つ唯一のことは、本番スクリプトを実行することです。

開発スクリプトを実行するには、yarn startまたはを使用しますnpm run start。新しい/distディレクトリの場合は、本番スクリプトyarn buildまたはnpm run build現時点で使用できます。

効率的に開発できるように、webback-dev-server を修正するのを手伝ってください。：） どうもありがとう！

オプション「localIdentName」を指定したcss-loaderでwebpackを使用し、もちろんクラス名のハッシュを使用したい

しかし、私は DOM に React などのライブラリを使用していません。

私のwebpackルール

そして index.html からのいくつかのコード

そしていくつかのscssルール

そして、webpack構成でクラス名を取得しましたcity-name__SOME-HASHが、内部index.htmlは残りますcity-name

どのようになりますか？でクラス名を更新することも可能index.htmlですか?