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

我想将我的反应javascript源代码分成小块文件，以便做动态路由。如何理解webpack chunk如何生成块js文件以反应动态路由？

为了解动态路由如何工作，我从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__/' 
    },

这是配置块文件的唯一的地方？分割这些块文件的逻辑是什么？当我更换路由器时，服务器如何知道需要下载哪个块文件？

来源

2017-01-08 Zhao Yi

当我更改路由器时，服务器如何知道需要下载哪个块文件？

不完全确定特定的chunk文件，但Webpack将您所有的js文件编译成一个文件。您的index.html（位于同一文件夹中）是您的React组件的呈现位置，并且还具有对该文件（bundle.js）的引用。

从服务器的角度来看，当你去你的站点时，根据你的路由设置，你总是被发送到你的'/'路由，然后利用你的客户端路由通过react-router。

我发现这些资源对于了解react-router/client和server side routing是非常有帮助的。希望这是有帮助的。

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

来源

2017-01-08 08:28:06

我不想的WebPack编译所有js文件成一个大文件。我想将js文件分割成模块。像这些块文件一样。但我不知道如何在webpack中做到这一点。如何将这些块文件与路由器相链接？ –

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

回答

相关问题