如何在保持这种情况下行为不变的情况下，将Webpack 3 CommonsChunkPlugin配置升级到Webpack 4 splitChunks？

在Webpack 4中，CommonsChunkPlugin被splitChunks取代，用于实现代码分割和公共模块提取。要将Webpack 3的CommonsChunkPlugin配置升级到Webpack 4的splitChunks，可以按照以下步骤进行操作：

在Webpack 4的配置文件中，找到原先使用CommonsChunkPlugin的地方，将其替换为splitChunks配置。
首先，需要在配置文件中添加optimization属性，用于配置代码分割和公共模块提取的相关选项。
在optimization属性中，添加一个名为splitChunks的子属性，用于配置splitChunks插件的行为。
在splitChunks属性中，可以设置一系列选项来控制代码分割的行为。常用的选项包括：
- chunks：指定需要进行代码分割的chunk类型，默认为async，表示只对异步加载的模块进行分割。可以设置为all，表示对所有模块进行分割；也可以设置为initial，表示对入口模块进行分割。
- minSize：指定一个模块的最小大小，只有当模块的大小超过这个值时，才会进行代码分割。
- minChunks：指定一个模块被引用的最小次数，只有当模块被引用的次数超过这个值时，才会进行代码分割。
- maxAsyncRequests：指定异步加载的模块同时请求的最大数量。
- maxInitialRequests：指定入口模块同时请求的最大数量。
- cacheGroups：用于配置公共模块的提取规则。可以配置多个cacheGroups，每个cacheGroup可以指定一个test正则表达式来匹配模块，以及一个priority优先级来决定提取的顺序。

根据具体需求，配置splitChunks属性的各个选项，以实现代码分割和公共模块提取的目标。

以下是一个示例的Webpack 4配置文件，展示了如何将Webpack 3的CommonsChunkPlugin配置升级到Webpack 4的splitChunks：

const path = require('path');

module.exports = {
  entry: {
    app: './src/index.js',
    vendor: ['react', 'react-dom']
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      minChunks: 1,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

在上述示例中，我们使用splitChunks配置来实现代码分割和公共模块提取。其中，chunks设置为'all'，表示对所有模块进行分割；minSize设置为0，表示不限制模块的最小大小；minChunks设置为1，表示只有被引用一次的模块才会进行分割。

cacheGroups中，我们配置了一个名为vendor的cacheGroup，用于提取来自node_modules目录下的模块。test使用正则表达式匹配node_modules目录，priority设置为-10，表示优先级较高，会先被提取。

另外，我们还配置了一个名为default的cacheGroup，用于提取其他模块。minChunks设置为2，表示只有被引用两次以上的模块才会进行分割；priority设置为-20，表示优先级较低，会在vendor之后被提取。

通过以上配置，Webpack 4会根据splitChunks的选项，自动进行代码分割和公共模块提取，生成对应的bundle文件。

腾讯云相关产品和产品介绍链接地址：