如何理解webpack块生成块js文件以响应动态路由？

Question

I want to split my react javascript source code into small chunks files in order to do dynamic routing.

In order to understand how dynamic routing work, I cloned react-router source code from https://github.com/ReactTraining/react-router . And run webpack command under examples. I can see that many files got generated under build directory as below:

$ 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]

From above output, you can see there are many chunk files got generated. In the examples/webpack.config.js file, I can see below configuration:

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

Is this the only place to configure chunk files? What is the logic to split these chunk files? When I change the router, how does the server know which chunk file need to be downloaded?

Answer 1

When I change the router, how does the server know which chunk file need to be downloaded?

Not exactly sure about the specific chunkfiles, but Webpack compiles all of your js files into one file. Your index.html (in the same folder) is where your React components are rendered and also has a reference to that one file (bundle.js).

From the servers perspective, when you go to your site, depending on how your routes are set up, you are always sent to your '/' route, which will then utilize your client side routing via react-router.

I found these resources really helpful in learning about react-router / client vs server side routing. Hope this is helpful.

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