Webpack4升级Webpack5后打包JS文件请求URL异常如何解决

问题描述 #

迁移过程中发现打包产出的client.js文件请求URL不符合预期：

• 异常表现：
• 正常表现（Webpack4版本）：资源会发起两个独立请求，效果参考

已提供的相关配置 #

入口（entry）配置 #

// ...

name: 'client',
target: 'web',
devtool: 'source-map',
entry: {
  client: ['@babel/polyfill', './src/client.js'],
},

// ...

输出（output）配置 #

// ...

output: {
  path: resolvePath(BUILD_DIR, 'public/assets'),
  publicPath: '/assets/',
  pathinfo: isVerbose,
  filename: isDebug ? '[name].js' : '[name].[chunkhash:8].js',
  chunkFilename: isDebug ? '[name].chunk.js' : '[name].[chunkhash:8].chunk.js',
},

// ...

代码分割（splitChunks）配置 #

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        chunks: 'initial',
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
      },
    },
  },
},

补充说明 #

• 该配置文件非本人最初编写，整体篇幅较长，调试难度较高，目前排查方向零散，以上仅为个人判断和问题相关的核心配置片段。
• 若判断问题由其他未贴出的配置项导致，可明确指出需要补充的配置内容。
• 核心诉求：定位该URL请求异常的根本原因，给出对应的修复方案。

内容的提问来源于stack exchange，提问作者Christian