問題タブ [webpack]

現在再生中のトラックと Soundcloud の進行状況を監視するグリースモンキー スクリプトを維持しています。以前は、require("lib/audiomanager")トラック情報の再生など、ページ全体の状態を表示できるオブジェクトにアクセスするだけで済みました。

問題は、Soundcloud がクライアント側の Javascript に webpack を使用するようになったことです。私の理解では、これにより、これらすべてのクラスが特定の番号としてパッケージに格納されます。それらが保存されている数は、クライアント側の JS が更新されて再コンパイルされるたびに変化するように見えます。

webpack 内に格納されたオブジェクトにアクセスする唯一の方法は、以下のようにグローバルな webpackJsonp を介するようです。パックの番号は一意である必要があります。

そのコードが実行され、webpack のその番号のオブジェクトにアクセスできるようになります。クライアント側の webpack'd JS で定義されているオブジェクトは次のとおりです。

だから、私が考えることができる解決策：

• このオブジェクトへのハンドルを取得するために使用できる、webpack 番号が変更されないオブジェクトを見つけます
• すべての webpack 番号を繰り返し、これと同じメソッド セットを持つオブジェクトを探します。

後者はややこしいようで、前者は不可能に思えます。何か案は？

私が試したこと：

• 目的のオブジェクトのように新しい n(53) を作成すると、更新間で同じままであるように見えます。audiomanager が表示されますが、ページの通常の audiomanager とは完全に分離されているため、何が再生されているかわかりません。

複数の Browserify または Webpack バンドルで、NPM 経由で必要なコードを共有するための簡単なソリューションを探して、ここで私の髪を引っ張ります。考えてみると、ファイルの「ブリッジ」などはありますか?

これはコンパイル時間によるものではなく (watchify を認識しています)、ベンダー固有のライブラリをすべて抽出してvendor.js、ファイルサイズをapp.js抑え、大量のソースマップでブラウザーをクラッシュさせないようにしたいという願望によるものです。さらに、コンパイルされた js を表示する必要が生じた場合に、よりクリーンな方法であることがわかります。など：

Bower ではなく NPM からコードをロードするか、相対パスを介してインポートして shim を介して識別できるように、「vendor」ディレクトリに保存することが非常に重要です。実際のアプリケーション ソースを除いて、すべてのライブラリ リファレンスを NPM 経由でプルしたままにしておきたいと思います。

すべてのソースコードを保持し、配列app.jsを介して、externals上記のベンダー ライブラリをコンパイルから除外します。

ではindex.html、両方のファイルが必要です

BrowserifyまたはWebpackを使用して、app.jsnpm経由でロードされたモジュールを「見る」ことができるようにするにはどうすればよいですか? 外部とのバンドルを作成し、エイリアスを介して直接ファイル (たとえば、node_modules) を参照することは認識していますが、より自動化され、「Require.js」のようなソリューションが少ないソリューションを見つけたいと考えています。

基本的に、依存関係を解決するためにapp.js内部を調べることができるように、2 つを橋渡しすることが可能かどうか疑問に思っています。vendor.jsこれは単純明快な操作のように思えますが、この広い広い Web のどこにも答えが見つからないようです。

ありがとう！

通常、開発者モードでは、Webpack は HTTP を使用して実行されます。通常、別のポートで http/websockets を使用して、HTTP および webpack を介してコンテンツを提供する Web サーバーがあります。

https で Web サーバーを実行し、https/websocket secure で webpack を実行することは可能ですか?

実行webpack --watchしてみましたが、JS ファイルを編集した後、自動再コンパイルがトリガーされません。

webpackを使用して再インストールを試みましnpm uninstallたが、まだ機能していません。

何か案は？

webpack-dev-serverで「proxy」( grunt-connect-proxy に似た) オプションを実現するには?

Grunt でwebpackとwebpack-dev-serverを使用しています。Gruntfile.js (以下のコード) のタスクは、ポート 8080 でサーバーを起動できます。すべてのバックエンド データ リクエスト (コンテキスト URL /ajax/*) のプロキシ設定を追加したいと考えています。

サーバーで webpack-dev-middleware を使用して、次のように JavaScript をコンパイルしています。

開発中はすべて正常に動作します。ビューにバンドルを含めることができます。しかし、それらは「dist」に組み込まれていないため、本番環境では含めることができません。このフォルダは常に空です。私は何を間違っていますか？誰かがアイデアを持っていますか？

宜しくお願いします。