angular.js - Webpack パッケージ化の大規模な SPA 構成の問題

Question

現在のプロジェクトは複数ページのアプリケーションです。使用されるフロントエンド ツールは angular1.x と Webpack です。 SPAに変換します。ルーティング管理に angular-ui-router を使用することを計画します。
問題は、すべてのファイルを 1 つにまとめると大きすぎることです。このアイデアは、vendor.js をサード クラス ライブラリと、特定のビジネス ロジックに関連する app.js にのみパッケージ化することです
たとえば、ログイン ページの場合、vendor.js と login.js のみをロードしてログインしたいと考えています。ダッシュボードページへ。また、vendor.jsとdashborard.jsのみをロードしたいと考えています。これと同様
angular-ui-router と webpack の設定方法、ありがとうございます。

Answer 1

ディレクトリ構造が次のようになっていると仮定します

リーリー

コードブロック

common/utils.js

リーリー

ログイン/index.js

リーリー

ダッシュボード/index.js

リーリー

期待した結果を得るには、webpack.config.js次のように構成します:

リーリー

梱包後の最終結果

リーリー

上記の通り。 。 。

Answer 2

リファレンスコードの分割

Answer 3

これで、webpack を使用して必要な JS を生成できるようになりました。 angular-ui-routerと組み合わせてさまざまなjsを導入するにはどうすればよいですか? ありがとうございます

Angular のオンデマンド読み込みに関する記事を見つけました

http://www.cnblogs.com/ys-ys/...、ui-router に基づいて、ocLazyLoad
が私のニーズを満たしているようです。ありがとうございます