Split chunks in webpack 4

Question

I'm trying to migrate project from webpack 3 to webpack 4. In previous version there was configuration like:

new webpack.optimize.CommonsChunkPlugin({ names: ['common', 'initApp'], filename: '[name].[hash].js' }),
new webpack.optimize.CommonsChunkPlugin({ names: ['app'], children: true, minChunks: 2, filename: '[name].[hash].js' }),

How to migrate it correctly to webpack 4?

I tried next config:

optimization: {
  minimize: !development,
  noEmitOnErrors: true, //! Webpack 4
  splitChunks: {
    cacheGroups: {
      utils: {
        name: 'utils',
        test: /utils/,
        chunks: 'initial',
        reuseExistingChunk: true
      },
      initApp: {
        name: 'initApp',
        test: /initApp/,
      },
      common: {
        name: 'common',
        test: /common/,
        chunks: 'all',
      },
      app: {
        minChunks: 2,
        name: 'app',
        test: /app/,
      },
    },
  },

  minimizer: [],
  namedModules: development,
},

And here the issue that I have: some my_module (from node_modules) has next code (I moved it to entry point utils):

  let localeStrings;
  export function l10n(key, ...args) {
    if (!localeStrings) {
      throw new Error('l10nLib.l10n called before locale strings loaded');
    }
    /// Do some logic
  }
  // And here some function is initialize localeStrings that we are calling `initApp` entry point

Now with current config this chunk (from my_module) calling twice: first time from initApp and second time from app entry point and localeStrings variable first time initialized properly when it was called from initApp and the second time when it was called from app entry point localeStrings is undefined, why?

Split chunks in webpack 4

0 Answers0