Static keys for vendor bundle in asset-manifest.json

Currently the asset-manifest.json in my build folder looks like this:

{
  "main.css": "/static/css/main.f4f38731.chunk.css",
  "main.js": "/static/js/main.56255761.chunk.js",
  "main.js.map": "/static/js/main.56255761.chunk.js.map",
  "static/css/1.36ceda45.chunk.css": "/static/css/1.36ceda45.chunk.css",
  "static/js/1.ade53803.chunk.js": "/static/js/1.ade53803.chunk.js",
  "static/js/1.ade53803.chunk.js.map": "/static/js/1.ade53803.chunk.js.map",
  "runtime~main.js": "/static/js/runtime~main.229c360f.js",
  "runtime~main.js.map": "/static/js/runtime~main.229c360f.js.map",
  "static/media/icons.svg": "/static/media/icons.6e39cadf.svg",
  "static/media/logo.svg": "/static/media/logo.61c6330d.svg",
  "static/media/help_logo.svg": "/static/media/help_logo.1ef27f5c.svg",
  "static/media/help_logo_mark.svg": "/static/media/help_logo_mark.8265813a.svg",
  "static/media/youtube_icon.svg": "/static/media/youtube_icon.d435ea9a.svg",
  "static/media/guarantee_emblem.svg": "/static/media/guarantee_emblem.d49af9a1.svg",
  "static/css/main.f4f38731.chunk.css.map": "/static/css/main.f4f38731.chunk.css.map",
  "static/css/1.36ceda45.chunk.css.map": "/static/css/1.36ceda45.chunk.css.map",
  "index.html": "/index.html",
  "precache-manifest.be82c4ddabdcb9e12cd3d143baad1412.js": "/precache-manifest.be82c4ddabdcb9e12cd3d143baad1412.js",
  "service-worker.js": "/service-worker.js"
}

I want to be able to use this asset-manifest.json to reference and and include my own script tags. However, the vendor bundle has dynamic keys:

  "static/css/1.36ceda45.chunk.css": "/static/css/1.36ceda45.chunk.css",
  "static/js/1.ade53803.chunk.js": "/static/js/1.ade53803.chunk.js",
  "static/js/1.ade53803.chunk.js.map": "/static/js/1.ade53803.chunk.js.map",

Is it possible to make these references something like static/css/1.chunk.css instead?

Using react-scripts@2.0.3

[jbach]

Considering the use case mentioned in https://github.com/facebook/create-react-app/issues/5172: Previously, I could just load the file referenced under the main.js key, thus not caring about changes.

It looks like loading an application now requires the runtime (runtime~main.js), the randomly named vendor chunk (static/js/1.ade53803.chunk.js) and the actual entry script (main.js).

How can a CRA-agnostic backend properly serve the application, if the vendor chunk is not statically keyed? Sorry, if this sounds like a dumb question.

[Zemelia]

Hello, have same issue. We have hashed keys due configs in webpack.config.prod.js, where name is ‘false’. splitChunks: { chunks: 'all', name: false, }, When I change this to true, I get normal names, so I can get vendors~main.js from asset-manifest.json

Can be used next workaround within https://www.npmjs.com/package/@craco/craco

// craco.config.js
module.exports = function({env}) {
  if (env === 'production') {
    return {
      plugins: [
        {
          plugin: {
            overrideWebpackConfig: ({ webpackConfig}) => {
              webpackConfig.optimization.splitChunks.name = true;
              return webpackConfig;
            },
          },
          options: {}
        }
      ]
    };
  }
  return {};
};