Webpack 4 chunks

[hashwin]

Firstly thanks to the Shakacode team, we are using this project with great success in our app. It's really great that you can take advantage of the Rails webpacker integration while still being able to traditionally configure webpack.

I am in the process of upgrading webpack to v4 and I ran into an issue when dealing with the new chunk system. I have 3 entrypoints in my app.
I have configured it like this:

{
  optimization: {
    runtimeChunk: {
      name: 'runtime'
    },
    splitChunks: {
      chunks: 'all'
    }
  },
   entry: {
    'agent-bundle': [
      'babel-polyfill',
      'es5-shim/es5-shim',
      'es5-shim/es5-sham',
      'raf/polyfill',
      './app/bundles/App/startup/App',
    ],
    'public-form-bundle': [
      'babel-polyfill',
      'es5-shim/es5-shim',
      'es5-shim/es5-sham',
      'raf/polyfill',
      './app/bundles/App/startup/PublicFormApp',
    ],
    'print-bundle': [
      'babel-polyfill',
      'es5-shim/es5-shim',
      'es5-shim/es5-sham',
      'raf/polyfill',
      './app/bundles/App/startup/PrintApp',
    ]
  },
...
}

It splits the code quite nicely taking out common chunks and vendor files, but it generates in this fashion:

Entrypoint agent-bundle = runtime-c3944866cab06dfa96e3.js vendors~agent-bundle~print-bundle~public-form-bundle-b6db766e184e11c5cb0e.chunk.js 9-0855b37fa6361a8f8ae1.chunk.js vendors~agent-bundle-1b4caa85bb6245e33a9e.chunk.js agent-bundle~print-bundle~public-form-bundle-198d5ae164e36f5009ef.chunk.js agent-bundle-cab4cfa6a643c9bebc11.chunk.js

Entrypoint public-form-bundle = runtime-c3944866cab06dfa96e3.js vendors~agent-bundle~print-bundle~public-form-bundle-b6db766e184e11c5cb0e.chunk.js 11-d33ce868a4cffedd8102.chunk.js 20-d6a6a62bad0e64d6bd88.chunk.js agent-bundle~print-bundle~public-form-bundle-198d5ae164e36f5009ef.chunk.js public-form-bundle-779f27842fa081aa26c2.chunk.js

Entrypoint print-bundle = runtime-c3944866cab06dfa96e3.js 2-f091fd7df1a7099ba4f9.chunk.js 4-739d47fe163b67886145.chunk.js vendors~agent-bundle~print-bundle~public-form-bundle-b6db766e184e11c5cb0e.chunk.js 7-0baf6b9f8001c6d709e5.chunk.js 9-0855b37fa6361a8f8ae1.chunk.js 10-2fff30d64a1aa7029065.chunk.js 11-d33ce868a4cffedd8102.chunk.js 17-58cfdab939ac84628587.chunk.js agent-bundle~print-bundle~public-form-bundle-198d5ae164e36f5009ef.chunk.js 13-63240a6df029f68c4444.chunk.js 23-d08e3d712ea13935f40c.chunk.js print-bundle-d1148ecacc96dfe8abb7.chunk.js

Now my problem is that as I change the code, I don't know which chunks to include in which layout in Rails - this may change.

So my question is, is there any way to generate a json or similar from the webpack output with the list of files in each entrypoint so that I could use it in Rails by iterating through and dynamically adding javascript_pack_tags for each of them?

[justin808]

@hashwin Dynamic code splitting based on routes is part of React on Rails Pro. You can see this in action live at https://egghead.io.

Those special bundle files are loaded dynamically by webpack.

For more information, please email me.