問題タブ [webpack-2]

webpack で js ファイルを処理 (minify/uglify) したいが、モジュールとしてフォーマットしないようにしたいので、webpackJsonp を含まない初期コード (縮小/uglify) のみを含む生の js ファイルになります。カスタムフォントがロードされているかどうかを検出するために、ブラウザにwebpackがロードされる前にロードするために、そのようなファイルが必要です。それを行うために webpack モジュールを使用すると、フォント ファイルが読み込まれた後にバンドルが読み込まれます。

最終編集

これの tl;dr 解決策は、それは不可能だということです。以下の一番の答えには良い情報がありますが。

からの以下のコードを検討してくださいcontacts.js。これは動的に読み込まれるモジュールでSystem.importあり、コード内の他の場所でオンデマンドで読み込まれます。

で動的にロードSharedUtil1される他のモジュールでも が使用されている場合、これらすべてのモジュールから除外し、最初に必要になったときにオンデマンドでのみロードするにSystem.importはどうすればよいですか?SharedUtility1

私のエクスポートはそれに依存しているため、トップレベルSystem.importのSharedUtil1は機能しません。エクスポートは、モジュールのコードのトップレベルにのみ配置でき、どのような種類のコールバックにも配置できません。

これはWebpackで可能ですか？バージョン 2.0.7 ベータ版を使用しています。

更新 1

バンドルローダーは私が望んでいたものだと思いましたが、そうではありません。それは、インポートされたモジュールを別の関数に変換し、コールバックを使用して呼び出して実際のモジュールに到達し、非同期でロードした後です。これは、コードに重大な変更を加えずにモジュール X を透過的に非同期にロードすることはできないことを意味します。最初に説明した問題に戻っているという事実は言うまでもありません。依存関係が読み込まれている場合、エクスポートは最上位にある必要があるため、エクスポートする方法はありません。

依存関係 X が必要に応じてオンデマンドでロードされ、それをインポートするインポートされたモジュールがインポートプロセスを透過的に待機することを Webpack に示す方法はありませんか? このユースケースは、リモートで大規模なアプリケーションの場合は必須条件になると思うので、何かが足りないと考える必要があります。

更新 2

require.ensurePeter の回答によると、commonChunk プラグインはエンドポイント間でコードを共有することに関連しているため、重複排除を機能させようとしexportました。

重複排除に関する限り、contacts.js両方tasks.jsとも同じように sharedUtil をロードします

import SharedUtil1 from '../../sharedUtilities/sharedUtility1';

webpackを次のように実行してみました

webpack --optimize-dedupe

また、追加することによって

webpack.config に。どちらの場合でも、sharedUtil コードは連絡先バンドルとタスク バンドルの両方に配置されています。

HMR で webpack 2 を試しているところ、奇妙な問題が発生しました。各変更の後、増分更新は非常に迅速に終了し、メッセージCompilation needs an additional pass and will compile again.が表示されます。その後、ビルドが完了するまで数秒かかります。

問題は、各変更の後、ビルド (2 回目のパス) が約 0.5 秒長く続き、しばらくすると使用できなくなることです。

スタイル、css、sass、およびbabelローダーを備えたwebpack 2.1.0ベータ4を使用しています。

ビルド時間を一定にする方法についてのアイデアをいただければ幸いです。

誰かが Webpack 2 構成で環境変数を渡す方法を理解するのを手伝ってくれますか? CONFIG関数から使用し、./node_modules/.bin/webpack --env.ENV developmentそれらを設定して使用することにより、環境変数を渡そうとしています。options.ENVなどを使用すると、 が得られますTypeError: Cannot read property 'ENV' of undefined。

次のような結果になるように webpack でグローバル変数を定義することは可能ですか?

私が見たすべての例は、外部ファイルを使用していましたrequire("imports?$=jquery!./file.js")

そのため、webpack 2 に更新したばかりで、System.import 呼び出しを見て、webpack が自動的にチャンクを作成する最初の作業セットアップができました。かなり甘い！

ただし、ロード中に進行状況を表示できるように、最初のチャンクを ajax 呼び出しでロードします。

<script>だから私の質問は、タグでチャンクをロードする代わりに、イベントをリッスンできる ajax リクエストを使用するように、 System.import の機能を上書きまたは変更できますか?

共通の依存関係を持つ動的インポート モジュールがあり、g.js を含む common.js が必要ですが (この例では)、機能しません。空の共通点があります。なにが問題ですか？g.jsと共通したい

index.js

t.js

d.js

webpack.config.js

Webpack 2 を使用しているhttps://github.com/ctrlplusb/react-universallyに基づいて反応アプリを構築しています。

私の UI コンポーネントには、http://react-toolbox.comを使用したいと考えています。

別のプロジェクトでWebpack 1を使用してreact-toolboxで動作するWebpackセットアップを行いました。どういうわけか、同様の構成が機能しなくなりました。

現在の webpack 構成は次のようになります。