反応ダイナミックルーティング用のチャンクjsファイルをwebpackチャンクで生成する方法を理解するには？

Question

ダイナミックルーティングを実行するために、私のリアクションのjavascriptソースコードを小さなチャンクファイルに分割したいと思っています。

ダイナミックルーティングの仕組みを理解するために、私はhttps://github.com/ReactTraining/react-routerからreact-routerソースコードをクローンしました。例の下でwebpackコマンドを実行します。私は、多くのファイルは、以下のようビルドディレクトリの下に生成されてしまったことがわかります。

出力以上から

$ webpack 
Hash: 5c9ad6c3ccf9f6bc5fcb 
Version: webpack 1.13.3 
Time: 4959ms 
           Asset  Size Chunks    Chunk Names 
         19.chunk.js 1.42 kB  19 [emitted] 
        active-links.js 9.91 kB  0 [emitted] active-links 
         auth-flow.js 19.4 kB  2 [emitted] auth-flow 
auth-flow-async-with-query-params.js 10.4 kB  3 [emitted] auth-flow-async-with-query-params 
      auth-with-shared-root.js 21.9 kB  4 [emitted] auth-with-shared-root 
          5.chunk.js 1.84 kB  5 [emitted] 
          6.chunk.js 1.39 kB  6 [emitted] 
          7.chunk.js 5.83 kB  7 [emitted] 
          8.chunk.js 1.52 kB  8 [emitted] 
          9.chunk.js 2.39 kB  9 [emitted] 
         10.chunk.js 2.35 kB  10 [emitted] 
         11.chunk.js 1.42 kB  11 [emitted] 
         12.chunk.js 1.44 kB  12 [emitted] 
         breadcrumbs.js 37.3 kB  13 [emitted] breadcrumbs 
      confirming-navigation.js 9.29 kB  14 [emitted] confirming-navigation 
       dynamic-segments.js 7.25 kB  15 [emitted] dynamic-segments 
         huge-apps.js 33.7 kB  16 [emitted] huge-apps 
         17.chunk.js 3.56 kB  17 [emitted] 
         18.chunk.js 5.21 kB  18 [emitted] 
         animations.js 222 kB  1 [emitted] animations 
         20.chunk.js 3.95 kB  20 [emitted] 
         21.chunk.js 7.59 kB  21 [emitted] 

、あなたが生成されてしまった多くのチャンクファイルがある見ることができます。例/ webpack.config.jsファイルでは、私は、設定の下に見ることができます。

output: { 
    path: __dirname + '/__build__', 
    filename: '[name].js', 
    chunkFilename: '[id].chunk.js', 
    publicPath: '/__build__/' 
    }, 

これはチャンクファイルを設定するための唯一の場所ですか？これらのチャンクファイルを分割するロジックは何ですか？ルータを変更すると、どのチャンクファイルをダウンロードする必要があるのか​​、サーバはどのように知っていますか？

Answer 1

私がルータを変更したとき、サーバはどのチャンクファイル をダウンロードする必要があるかをどのように知っていますか？

特定のチャンクファイルについてはっきりしないものの、Webpackはすべてのjsファイルを1つのファイルにコンパイルします。 index.html（同じフォルダ内）は、Reactコンポーネントがレンダリングされる場所で、その1つのファイル（bundle.js）への参照も含まれています。

サーバーの観点からは、サイトに行くとき、ルートの設定方法に応じて、常に「/」ルートに送信されます。このルートは、リアルーター経由でクライアント側のルーティングを利用します。

私はこれらのリソースが反応ルータ/クライアント対サーバ側ルーティングについて学ぶのに本当に役立つことを発見しました。これが参考になることを願っています。

https://github.com/reactjs/react-router-tutorial React-router urls don't work when refreshing or writting manually