feat: add comments abilities to require.context

[Tofandel]

Fixes #9184 by adding the special comments feature from import() to require.context()

• Tests

[webpack-bot]

For maintainers only:

• This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
• This needs to be backported to webpack 4 (issue will be created when merged)

[Tofandel]

Failure is a random fail in all pipelines on macOs

https://dev.azure.com/webpack/webpack/_pipeline/analytics/stageawareoutcome?definitionId=3

[asos-tomp]

Would love if this could be backported to Webpack 4...

[webpack-bot]

Thank you for your pull request! The most important CI builds succeeded, we’ll review the pull request soon.

[Tofandel]

First somebody needs to review this PR for webpack 5 😅

[alexander-akait]

What is use case?

[Tofandel]

@alexander-akait Described in #9184 To be able to specify chunk names (and all other comment features) when using require.context() in the same way you use the async import(), it's currently not possible to give a chunk name to files required with require.context and because they both have the same inner options, it makes sense to give them the same way to pass them

[alexander-akait]

Why do not use import()? We are trying to reduce non JS abilities due incompatibility with ECMA modules

[Tofandel]

Well, you can't match by regex with import, and you can't get a list of files, so localization is the best use case for require.context, for instance:

  const locales = require.context('@/locales', false, /[A-Za-z0-9-_,\s]+\.json$/i);
  const vuetify = require.context('vuetify/lib/locale', false, /[A-Za-z0-9-_,\s]+\.js$/i);

Because with this you can enumerate/iterate the available locales which import cannot do

[zaqqaz]

@alexander-akait , @Tofandel are there any updates on it ?

There are quite a few use cases when you may need to dynamically load files by specific regex or with the dynamic value, like:

const importTheme = require.context(
    'codemirror/theme/',
    false,
    /\.css$/,
    'lazy',
);

// ... some-where later in you code
await importTheme(/* webpackChunkName: 'CodeEditor-theme' */ `./${theme}.css`);
// theme is ready;

[vankop]

please use import.meta.webpackContext #15446