面试题：Webpack多入口多出口下的代码拆分与公共模块提取

Question

在Webpack多入口多出口配置场景下，项目中有三个入口文件`src/home.js`、`src/about.js`和`src/contact.js`，它们有一些公共的依赖模块，如`lodash`。请阐述如何进行代码拆分并提取公共模块，以优化打包体积和加载性能，同时给出具体的Webpack配置及原理说明。

Answer 1

代码拆分与公共模块提取方法

1. 使用splitChunks插件：Webpack的splitChunks插件可以自动将公共模块拆分出来。
2. 原理：splitChunks插件会分析所有入口chunk的依赖关系，找出重复的模块，并将其提取到单独的chunk中。这样在浏览器加载时，公共模块只需加载一次，不同入口对应的chunk可以复用已加载的公共模块，从而优化加载性能。

Webpack配置

const path = require('path');

module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js',
    contact: './src/contact.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'commons'
    }
  }
};

1. entry：定义了三个入口文件，分别对应home、about和contact。
2. output：指定输出路径为dist目录，并且输出文件名使用[name].bundle.js的格式，[name]会被替换为入口文件对应的名称。
3. optimization.splitChunks：
   • chunks: 'all'表示对所有类型的chunk（包括异步chunk和初始chunk）都进行拆分。
   • name: 'commons'指定了公共模块拆分出来后的文件名前缀为commons，Webpack会自动生成唯一的文件名，例如commons.js 。这样就会将所有入口文件中重复的模块，如lodash，提取到commons.js文件中，实现代码拆分和公共模块提取，优化打包体积和加载性能。