I recently worked on my project to do code splitting on language packs. They were packed into the same major shared chunk when using dynamic require(): (like the following, I only pasted a simplified piece to show the syntax)

switch (lang) {
  case 'it':
    return require('./langs/it_IT.json');
  case 'ja':
    return require('./langs/ja_JP.json');
  case 'ko':
    return require('./langs/ko_KR.json');
  default:
    return require('./langs/en_US.json');
}     

This is unexpected for me. I thought dynamic imported pieces would be split into individual chunks. Not until I rewrote the above piece using import(), these language packs were split from the main chunk.

switch (lang) {
  case 'it':
    return import('./langs/it_IT.json');
  case 'ja':
    return import('./langs/ja_JP.json');
  case 'ko':
    return import('./langs/ko_KR.json');
  default:
    return import('./langs/en_US.json');
}    

I've done some research on the difference between require and import, but I didn't find the answer to why webpack didn't code split on dynamic required modules. Can anyone explain the difference between these two methods?