Is it possible to get a file's output chunkId inside the file itself?

[Trinovantes]

I'm trying to set up an Vue 3 SSR app with webpack 5

One optimization I'm looking to make is to be able to insert <script> and <style> tags for each of the current route's matched components. For example, on my home page, I'm able to get this list of components from my router:

[
  {
    name: "MainLayout"
    ssrRender: [Function (anonymous)],
    __props: [],
    __emits: null
  },
  {
    name: 'Home',
    setup: [Function: setup],
    ssrRender: [Function (anonymous)],
    __props: [],
    __emits: null
  }
]

I'm setting chunkIds: 'named' and using webpack-manifest-plugin to generate a manifest.json of my output files:

{
  'main.js': '/public/main.02abaf13c989d45bda4a.js',
  'main.css': '/public/main.720c235a3931213fae14.css',
  'src_web_client_layouts_MainLayout_vue.js': '/public/src_web_client_layouts_MainLayout_vue.a6a5b21b08752df25dbb.js',
  'src_web_client_layouts_MainLayout_vue.css': '/public/src_web_client_layouts_MainLayout_vue.77edb0776b5a2a7d5cd8.css',
  'src_web_client_pages_Home_vue.js': '/public/src_web_client_pages_Home_vue.ba48bda92fcb74fdee65.js',
  'src_web_client_pages_Home_vue.css': '/public/src_web_client_pages_Home_vue.0f2d9630ec37b61c3375.css',
}

Then I just have to do simple string matching on the manifest's keys to find the correct files to insert into my output html.

While this works fine, I'm wondering if it's possible to obscure my file structure (i.e. src_web_client_layouts) and avoid the need to do string matching?

Ideally I'd like to use chunkIds: deterministic and be able to insert the chunk id (e.g. 123.js) into my component's name:

// MainLayout.vue
export default defineComponent({
   name: PLACEHOLDER // Ideally this should be replaced by this file's output chunk id as if it was defined in DefinePlugin
})

[alexander-akait]

You can implement own filename using filename: () => {} and chunkFilename: () => {}, i.e. using functions

[Trinovantes]

Thanks, I was able to solve my issues with a chunkFilename function

function createChunkFn(ext: string) {
    return (pathData: unknown): string => {
        const defaultChunkName = isDev
            ? `[id].${ext}`
            : `[id].[contenthash].${ext}`

        const data = pathData as { chunk: Chunk }
        const filename = data.chunk.id
        if (typeof filename !== 'string') {
            return defaultChunkName
        }

        const pathParts = filename.split('_')
        pathParts.reverse()
        if (pathParts[0] !== 'vue') {
            return defaultChunkName
        }

        return defaultChunkName.replace('[id]', pathParts[1])
    }
}

export default {
    output: {
        chunkFilename: createChunkFn('js'),
    },

    optimization: {
        chunkIds: 'named',
    },
}

The only trade off is that I have to ensure my vue filenames are globally unique due to how I implemented my function