Search code examples
webpacksubdirectoryreact-intlexternals

How to write webpack external for module subdirectory

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

Solution

  • 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/),