How to write webpack external for module subdirectory

Question

I am trying to add all files from module subdirectory to Webpack externals. Especially data of react-intl locale files.

I am tryng to specify a path to the locale files with a regexp in a webpack config, but it does't work:

module.exports = {
  //...
  externals: [
   /react-intl\/locale-data\/.*/,
   // ...
  ]
};

I am loading those files dynamically, is there a problem?

const localeData = require(`react-intl/locale-data/${language.getLocale()}`);

Every dependency is correctly externalized, except those locale files: Webpack bundle

Answer 1

It seems like

const localeData = require(`react-intl/locale-data/en`);

if you specify not a dynamic way, then it works as you expected.

I've been using a different way to avoid this problem as below and load dynamically.

// Choose the locales that we want to include for react-intl
new webpack.ContextReplacementPlugin(/react-intl[\/\\]locale-data$/, /en|ja|id|es/),