問題タブ [webpack-dev-server]

現在、さまざまなフロントエンド テーマを使用するアプリケーションを開発しています。これらのテーマは、ユーザーが選択できる単純な CSS ファイルです。

技術的には、これらのテーマは .scss ファイルであり、webpack によってコンパイルされ、angular の標準的なリンク タグを介してロードされます。

<link rel="stylesheet", ng-href="themes/{{theme}}.css">

削除された webpack 構成は次のようになります。

extractTextPlugin は HMR をサポートしていないため、ホット モジュール交換 (HMR) 機能を有効にして webpack-dev-server を使用するまで、これは完全に正常に機能します。単純に extractTextPlugin (options.disable) を無効にするか、それらを削除すると、すべてのテーマがメイン モジュールにコンパイルされます。もちろん、すべてが一緒に適用されるため、テーマが壊れます。

extractTextPlugin を使用せずにこれらの CSS ファイルを webpack で直接生成するにはどうすればよいですか? さまざまなエントリ/チャンク、ファイルローダーなどでさまざまな試みを試みましたが、実際には何も機能しません。

簡単にする必要があります。ExtractTextPlugin を使用せずに、SCSS ファイルから静的 CSS ファイルを JS ファイルに変換せずに生成します。

誰かが私を正しい方向に向けることができれば、それは素晴らしいことです.

publicPathinが何をするのかよくわかりませんwebpack。具体的には、output.publicPath. githubのドキュメントでは、これを見る

https://github.com/webpack/docs/wiki/configuration#outputpublicpath

Javascript / HTML ページのビューからの output.path。

reactjsホットロードの場合、私は持っています

これは、ビルドされた webpack ファイル ( main.js) がdev-server http://localhost:8080/public/bundle/に配置されていることを意味しますか?

インライン スタイルではなく、less の css ファイルを出力するように webpack を取得しようとしています。私はextract-text-webpack-pluginを使用しています。

ドキュメントに基づいてセットアップし、stackoverflow で同様の質問を見てきましたが、以下の webpack 構成ファイルがファイルを出力しない、または index.html に何かを入れない理由がわかりません

私は浮浪者のlaravel/homesteadボックスでノードプロジェクトに取り組んでいます。すべて正常に動作し、私のホスト定義に移動すると、プロジェクトにアクセスできます/etc/hosts。

しかし、私は自分のプロジェクトを webpack でビルドして監視しようとしているので、webpack-dev-server をインストールして実行できます:

私の問題は、ブラウザで project:8080 にアクセスしようとすると、読み込みエラーが発生することです。

vagrantの Anetstat -an | grep 8080は、ボックスがリッスンしていることを示しています。を使用してポートを転送しようとしましたhomestead.yaml

しかし、ポート フォワーディングの有無にかかわらず、エラー ページしか表示されません。

webpack ウォッチャーを機能させるにはどうすればよいですか?

できれば node パッケージをロードしますか?存在しない場合にのみ、bower パッケージをロードします。

Webpack サイトで推奨されているノード パッケージのみを使用しますが、bower、https://github.com/Stamplay/stamplay-js-sdk および https://github.comにあるライブラリをロードする必要があります。 /Stamplay/angular-stampplay

bower-webpack-plugin で試す

https://github.com/lpiepiora/bower-webpack-pluginをインストールしました

しかし、実行webpack-dev-server -d --watchするとエラーが chrome コンソールに表示されます:

ResolverPlugin を試してください ( Webpack のドキュメントを参照)

webpack.configに追加します..

しかし、ここで述べたように、Stamplayオブジェクトは正しくありません!

CDN と angular-webpack-plugin を試す

最初に script タグをindex.html..に追加します。

次に、webpack.config に外部を追加します。

そして最後に.. new AngularPluginwebpack.configpluginsに

このように動作しますが、使用できません。angular-stamplay試してみると、モジュールstamplayapper でエラーが発生します。:(

ここでこの変更を含むブランチを参照してください

完全なプロジェクトはこちら: https://github.com/Ridermansb/webpackBowerStarter

関連するwebpack/webpack の問題。

私の経験では、実際のプロジェクトで webpack を使用すると、特定の数のコンポーネントや依存関係を重ねると速度が低下します。次のアプリケーションでこれを実証しようとするテストリポジトリがあります。

• エントリ ポイントはで、これにはとA.jsが必要です。B.jsC.js
• B.js小さく、多くの依存関係がありません。
• C.jsモノリシックであり、何千もの要件があります。

私の期待はwebpack-dev-server、テストプロジェクトで使用する場合、保存するたびにB.js、webpack がそれを認識しC.js、その依存関係がまったく変更されていないことです。B.js迅速に (10 ミリ秒未満で) コンパイルし、キャッシュに置き換えて、最初のコンパイルからキャッシュされたバージョンを使用してコンパイルされたものを出力する必要がありますA.js。C.js

ただし、webpack3002は を保存するたびに隠しモジュールをB.jsコンパイルするため、コンパイル時間は960ms. これ自体は悪くありませんが、react-hotやのようなローダーを追加すると制御不能になりbabelます。

私には解決策があります。同じテスト プロジェクトにdllブランチがあります。そのブランチで、 を実行してとwebpack --config webpack.dll.config.jsから 2 つの DLL を生成できます。これは、コンパイル時に利用されます。その後、 を使用すると、 を保存するたびにその DLL が再コンパイルされ、その DLL の 1 つが更新されたことに気づき、 の古い DLLと新しい DLL を取得して、それらを 1 つの迅速なハッピー バンドルに結合します。B.jsC.jsA.jswebpack-dev-serverB.jsA.jsC.jsB.js

そのブランチをさらに進めて、ディレクトリの読み取りまたは依存関係グラフのウォークを実行して、すべてのコンポーネントの DLL を生成することができます。これは、すべての webpack プロジェクトに適用できる可能性のあるアプローチです。理論的には、それは私が望むのと同じくらい速くコンパイルするはずです。しかし、その時点で、webpack のキャッシング層が独自に行うべきことを (不十分に) 再実装したように思えますが、ここで何が起こっているのでしょうか?