1. 配置多入口点

首先，在 webpack.config.js 文件中定义多个入口点。你可以通过对象形式来指定多个入口点，每个入口点对应一个输出文件。

const path = require('path');module.exports = {entry: {app1: './src/app1/index.js',app2: './src/app2/index.js'},output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')},// 其他配置...
};

在这个例子中，app1 和 app2 分别对应两个不同的入口文件，Webpack 会分别为它们生成一个输出文件，文件名分别为 app1.bundle.js 和 app2.bundle.js。

2. 使用 optimization.splitChunks 提取公共依赖

为了提取公共依赖，可以在 optimization 配置项中使用 splitChunks 选项。splitChunks 可以根据一定的策略将公共模块提取到单独的文件中。

const path = require('path');module.exports = {entry: {app1: './src/app1/index.js',app2: './src/app2/index.js'},output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')},optimization: {splitChunks: {chunks: 'all', // 对所有类型的 chunk 进行分割minSize: 10000, // 最小的 chunk 大小，默认是 20000 字节maxSize: 0, // 最大的 chunk 大小，默认是 0，表示没有限制minChunks: 1, // 模块必须被共享的次数，默认是 1maxAsyncRequests: 10, // 按需加载时的最大并行请求数，默认是 10maxInitialRequests: 5, // 入口点的最大并行请求数，默认是 5automaticNameDelimiter: '~', // 自动生成的 chunk 名称分隔符，默认是 ~name: true, // 使用默认的命名规则cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/, // 匹配 node_modules 中的模块priority: -10, // 设置优先级，负数表示较低的优先级filename: 'vendors~[name].js' // 自定义公共 chunk 的文件名},default: {minChunks: 2, // 至少被两个 chunk 共享priority: -20, // 设置优先级reuseExistingChunk: true, // 如果当前 chunk 已经包含了一个模块，则不再生成新的 chunkfilename: 'common~[name].js' // 自定义公共 chunk 的文件名}}}},// 其他配置...
};

3. 解释 cacheGroups 配置

vendors：这是一个缓存组，用于匹配来自 node_modules 的模块，并将它们提取到一个名为 vendors~[name].js 的文件中。
default：这是另一个缓存组，用于匹配至少被两个 chunk 共享的模块，并将它们提取到一个名为 common~[name].js 的文件中。

4. 动态导入和代码分割

如果你的应用中使用了动态导入（import()），Webpack 会自动进行代码分割，生成按需加载的 chunk。这对于提高应用的加载性能非常有帮助。

// 动态导入示例
import('./module').then((module) => {// 使用 module
});

5. 测试和优化

配置完成后，运行 webpack 命令进行构建，检查生成的文件是否符合预期。可以通过查看 dist 目录下的文件来验证公共依赖是否被正确提取。

6. 生产环境优化

在生产环境中，建议使用 mode: ‘production’ 模式来启用更多优化，如压缩、树摇等。

module.exports = {mode: 'production',// 其他配置...
};