Webpack中的提取公共代码（Extracting Common Code）是什么！如何进行配置！

在Webpack中，当多个模块中存在相同的代码时，我们可以使用提取公共代码来避免代码的重复加载，从而减小打包后的文件体积。这样可以提高页面的加载速度。

为了在Webpack中配置提取公共代码，我们可以使用插件 webpack.optimize.SplitChunksPlugin（Webpack4中）、webpack.optimize.CommonsChunkPlugin（Webpack3及更早版本中）。

Webpack4中的配置示例：

const path = require('path');
 
module.exports = {
  entry: {
    main: './src/main.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'common'
    }
  }
};

上面的例子中，我们通过 entry 属性指定了入口文件 main.js 和 vendor.js，它们分别会生成 main.bundle.js 和 vendor.bundle.js。

在 optimization.splitChunks 中，我们指定了 chunks: 'all'，这会将所有模块中重复的代码提取为一个单独的文件。我们还可以通过 name 属性指定提取的公共代码文件的名称，这里我们指定为 common.bundle.js。

在Webpack4中，SplitChunksPlugin 成为了默认配置，我们可以直接通过 optimization 属性进行配置。但是在Webpack3及更早的版本中，还需要使用 CommonsChunkPlugin 插件来进行配置。