Allow webpackChunkName to be specified when using require.context

[DaniJG]

Feature request

What is the expected behavior?

When using require.context it should be possible to specify the chunk name, same as when using magic comments with dynamic import statements.

Ie it should be possible to write (assuming a 5th argument is added to require.context for the chunk name):

require.context(
  '@/views', 
  true, 
  /\.async\.vue$/, 
  'lazy',
  '[request]')

which should generate the same chunks as when using

import(
  /* webpackChunkName: "[request]" */
  `@/views/${name}.async.vue`
);

What is motivation or use case for adding/changing the behavior?
I would like to automatically generate a chunk for every page in a Vue app that meets a certain convention. Ideally the chunk name would be based on the page name.

How should this be implemented in your opinion?
A 5th argument could be added to the RequireContextDependencyParserPlugin to extract the chunk name and pass it into the RequireContextDependency options.

Are you willing to work on this yourself?
yes

[PerspectivesLab]

that would be nice, as require.context doesnt generate any chunk

[JasKang]

const children = context.keys().map(key => {
    const path = key
      .split('/')
      .map(str => str.replace(/\.vue/g, '').replace(/\./g, ''))
      .filter(str => str !== '');
    return {
      component: () => context(/* webpackChunkName: "[request]" */ key),
      name: `${ctxKey}-${path.join('-')}`,
      path: `${ctxKey}/` + path.join('/')
    };
  });

@DaniJG
I hope so

[webpack-bot]

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[alexander-akait]

bump

[falcon03]

up. This issue is still relevant, especially considering that dynamic imports don't offer a feature similar to require.context

[Losses]

bump this issue

[Rhilip]

bump this issue

[dukhevych]

bump this issue

[sokra]

This has been implemented since years

[sanmaozhao]

Where can I find the documentation or example?
Thanks!

[sokra]

Oh I misread this as require.ensure instead of require.context.

No this is not implemented, but it's not that difficult to add.

Send a PR. see RequireContextDependencyParserPlugin.js, add chunkName property to options argument of new RequireContextDependency.

[Tofandel]

Okay, I'm starting a PR

I believe we should have control over the chunkName, just request would generate a chunk per file, I'd want to generate grouped request chunks (eg: require context a folder and the subfolder would be the chunk name) but that's an entirely new issue (since it would require a deeper and different change)

[Tofandel]

PR implements the same features as import with comments

So now it would be possible to do

require.context(
 /* webpackMode: "lazy" */
 /* webpackChunkName: "[request]" */
  '@/views', 
  true, 
  /\.async\.vue$/
)

[vankop]

please use import.meta.webpackContext for that #15463