問題タブ [webpack]

Webpack または Browserify を使用して、バンドルの「Web」バージョンと「ノード」バージョンの両方を一度に作成する方法はありますか? バンドルの「Web」バージョンはクライアントで使用され、同じバンドルの「ノード」バージョンはサーバーで事前レンダリングに使用されます (「同形」の Web アプリケーション)。

反応ルーターと一緒に開発で webpack-dev-server を使用するアプリを作成しています。

webpack-dev-server は、1 つの場所 (つまり "/") にパブリック エントリ ポイントがあるという前提に基づいて構築されているようですが、react-router ではエントリ ポイントを無制限に使用できます。

webpack-dev-server の利点、特に生産性に優れたホット リロード機能が必要ですが、react-router で設定されたルートをロードできるようにしたいです。

それらが連携して動作するように実装するにはどうすればよいでしょうか? これを許可するような方法で、webpack-dev-server の前で高速サーバーを実行できますか?

Webpack でアプリケーションをセットアップし、Backbone Marionette でフロントエンドを実行しています。[AMD/Require と同様に、App Module 内の Controller 内で LayoutView を生成する] アプリケーション スクリプトを実行することはできましたが、わかりません。

以前は Underscore テンプレートを使用していましたが、webpack は Jade と Handlebars を好みます。Jade に切り替えても、LayoutView はエラーを返します。

Uncaught UndefinedTemplateError: null または未定義であるため、テンプレートをレンダリングできません。

レンダリングされた Jade テンプレートをコンソールからログアウトすると、次のようになります。<div class="glossary-container"></div>

レビュー用の私のLayoutViewコードは次のとおりです。

webpack を使用して、javascript ファイルをバンドルしています。

私の Webpack 構成 (gulp を使用して Webpack に渡される) は次のようになります。

私app.jsは単純なrequireです：

Webpack は問題なくファイルをビルドし、生成されたファイルには modernizr が含まれています。

問題は、ページにファイルを含めてテストすると、modernizr エラーが発生することです。

webpack のバンドル ファイルは次のようになります。

この問題の原因は何ですか?

設定ファイルは以下のようになります

ただし、実行すると、出力フォルダーに [hash].ttf が生成されます。ハッシュなしで同じ入力ファイル名で出力する方法。

大規模な AngularJS アプリケーションにwebpackを使用する際の助けを探しています。機能に基づくフォルダー構造を使用しています (各機能/ページにはモジュールがあり、コントローラー、ディレクティブがあります)。単一のバンドルを生成する Grunt で動作するように webpack を正常に構成しました。大きなアプリになるので、チャンクを作成したいと思います。モジュール (ページ/機能) アーティファクトを非同期でロードしたいと考えています。

'code splitting'構文を使用して使用する webpack の例をいくつか見ていきrequire([deps],fn )ます。ただし、チャンクを遅延ロードできませんでした。まず第一に、AngularJS がユーザーを次のページにルーティングする前に、これらのチャンクをインポートする必要がある正確な場所がわかりません。責任の明確な分離を見つけるのに苦労しています。

各ルートの後にコントローラー/ディレクティブ/フィルターを非同期にロードするために webpack が使用される AngularJS アプリケーションの例を誰かが教えてくれましたか?

私がフォローしているリンクのいくつか： 角度1.xでの依存関係の遅延読み込みにBrowserifyまたはWebpackを使用する必要があり ます/posts/code/single-page-modules-with-webpack.html

モジュールから flat-ui.less をロードする際に問題があります。助けが必要。

このようなflat-uiが必要ですrequire('flat-ui/less/flat-ui.less');また、関連する各ローダーのバージョンは"less-loader": "^0.7.7", "css-loader": "^0.9.0", "style-loader": "^0.8.1",

私webpack.config.jsはこのようなものです：

残念ながら、私はこれを手に入れました

ここで何が起こっているのか分かりますか??

前もって感謝します。

現在再生中のトラックと 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 を実行することは可能ですか?