Question regarding to chunk for code splitting

[hung-phan]

Hi @halt-hammerzeit,

Thanks for creating this lib. I just wonder is there any way that I can get the name of chunks in code splitting to create preload links for those chunks. For example, I want to have sth like this plugin does (https://github.com/GoogleChrome/preload-webpack-plugin).

My assumption is that this lib can generate the chunks with identifier in webpack-stats.json or webpack-assets.json in production mode, so I can refer to it for generating preload links. What do you think?

[catamphetamine]

I didn't understand what you said. You can describe it in more detail.

[hung-phan]

For example, in this code:

  <Router history={history} {...options}>
    <Route
      path="/"
      getComponent={(nextState, cb) => {
        require.ensure([], (require) => {
          cb(null, require('./client/components/todos').default);
        });
      }}
    />
    <Route
      path="/static-page"
      getComponent={(nextState, cb) => {
        require.ensure([], (require) => {
          cb(null, require('./client/components/static-page').default);
        });
      }}
    />
  </Router>

I am trying to create two async bundles for todos and static-page. I want to have sth like the below screenshot.

I want to get the chunk name (chunk: chunk.hashcode.js) to include into the header of the page.

[catamphetamine]

It should output javascript file names (with hashes) for all available chunks to webpack-assets.json Check that

[hung-phan]

Ah, my bad. Just found it now. Thanks @halt-hammerzeit

[tomatau]

I don't see code split chunks in my asset json, just the named entries. How did you get the code split chunks?

[catamphetamine]

Post your assets json

[hung-phan]

Should be:

require.ensure(['path/to/module'], (require) => {
  // do sth
}, 'module-name');

[tomatau]

We're using webpack 2 import() and I can see the stats showing 0.[hash].js 1.[hash].js etc... are being output. They just aren't listed in the assets json.

{
  "javascript": {
    "body": "/check-service-status/body.fbc311210aa018efe5fc.js",
    "admin": "/check-service-status/admin.fbc311210aa018efe5fc.js",
    "head": "/check-service-status/head.fbc311210aa018efe5fc.js"
  },
  "styles": {
    "body": "/check-service-status/body.fbc311210aa018efe5fc.css",
    "admin": "/check-service-status/admin.fbc311210aa018efe5fc.css"
  },
  "assets": {
    "./src/assets/router.jpg": "/check-service-status/3865ac0a35e1265131e51761a02bd5b0.jpg",
  }
}
....

[catamphetamine]

You must explicitly define named module.entryies in webpack configuration in order for them to appear in webpack-assets.json