問題タブ [html-webpack-plugin]

スタイラス バンドルを webpack 構成ファイルの html ファイルに挿入する必要があります。

私は既に HtmlWebpackPlugin を使用して js バンドルを挿入しており、このプラグインを使用してコンパイル済みのスタイラス バンドルを挿入することも可能であると考えました。

以下は私の現在のwebpack.config.jsファイルです：

スタイルを機能させる唯一の方法はrequire('./index.styl);、JavaScript ファイルに追加することでしたが、これは必要なものではありません。

HtmlWebpackPluginConfigForJSindex_bundle.js正常に動作し、 my にファイルを正常に挿入しますindex.html。しかし、それはスタイルでは機能しません。

スタイラス バンドルが正しく挿入されるように、webpack の設定を改善する方法を教えてください。

my app.jsand main.csswhileを変更するwebpack-dev-serverと、バンドルが更新されます。しかしindex.html、コンテンツを変更しても更新されません。HTML に行を追加するとwebpack-dev-server、ページ上の何も更新されません。これが私webpack.config.jsのpackage.jsonファイルです。あなたが私を助けてくれることを願っています。

webpack.config.js :

パッケージ.json :

私のディレクトリ構造：

ディレクトリ内のすべてのファイルdistは webpack によって生成されます。

反応アプリケーションを構築するために webpack を使用しています。のようなファイル名にバージョン番号を持つスクリプトタブを持つ html を生成する方法があることを知りたいだけです。

HtmlWebpackPlugin を調べてみましたが、何も見つかりませんでした。これを行うためのプラグインがあるか、独自のスクリプトを作成する必要があるかどうか、誰かが私に指示を与えることができますか?

ありがとう

Angular 1.x アプリケーションで Webpack を使い始めたばかりです。実際のソリューションがありますが、イメージを要求するのではなく (ビルド ディレクトリに強制的にコピーする必要があります)、html を自動的に解析してすべての IMG を要求することを望んでいました。タグ。

もうメンテナンスされていないようですが、モジュールを見つけたようです: https://github.com/webpack/html-loader

ここで私のオプションは何ですか？

オプションは、Webpack コピー プラグインを使用してアイテムをビルド ディレクトリにコピーすることですが、これは、使用されていないものをコピーする可能性があることを意味します。

私はWebpackを使い始めたばかりですが、これまでのところ素晴らしいものですが、飲み込むには別のタイプの考え方が必要です.

と を使用webpackしhtml-webpack-pluginて、生成されたスクリプト バンドルで index.html ファイルを更新しますbundle.[hash].js。

次にwebpack-dev-server、そのバンドルをメモリにロードし、ホット モジュール交換を利用できるように実行する必要があります。

これにより、コードが 2 回コンパイルされます。

ただし、私が望むのは、 index.htmlファイルを新しいでwebpack-dev-server更新できるようにすることです。2回コンパイルするのは奇妙に思えます。bundle.[hash].jswebpackwebpack-dev-sever

繰り返しますが、実行する唯一の理由webpackは、index.html ファイルをバンドルの新しいハッシュで更新することです。webpack-dev-server更新された index.html をディスクに出力できれば、webpackコマンドを完全に削除できます。

これは可能ですか？もしそうなら、webpack構成の変更はどうなりますか? 私の webpack 構成は非常に長いので、ここに投稿するのに役立つとは思いませんでした。

アプリケーションのバンドルを生成するために webpack を使用しています。バンドルが生成されたら、次のタスクを実行する必要があります。

1. バンドル ファイルを開き、特定のパスの名前を変更します。Web サイトをセットアップする方法が原因で、作成したバンドル内のパスを変更せざるを得なくなりました。現在、パスを手動で変更しています。したがって、基本的には XXXX テキストを検索し、バンドル内の YYYY に置き換えるタスクを実行しようとしています。
2. キー/テキストの名前を変更した後、コンテンツを醜くしてファイルを縮小したいと考えています。

どのようなオプションがありますか。私はwebpackが初めてで、可能な解決策を探しています。

反応（es6）プロジェクトにwebpackを使用しています。

私の問題

私はES6 で反応アプリを構築したので、どこでも依存関係にimportキーワードを使用しました。サーバー側のレンダリングにはNodeJSを使用しているため、インポートはまだサポートされていません。このためには、 importの代わりにrequireを使用する必要があります。

アプリをバンドルするために webpack を使用しましたが、常に最終的なバンドル ファイル (single.bundle.js) を生成します。そのため、サーバー側のレンダリング用にトランスパイルされたコードのチャンクをインポートできません。

解決

すべてのファイル(src から dist)をトランスパイルできる場合は、この es5 ファイルを nodejs サーバー コードにインポートできます。

質問

これは webpack を使用して、バンドルファイルではなく同じ出力でフォルダー全体をトランスパイルすることは可能ですか?

それ以外の場合は、grunt または gulp を使用する必要があります。:(