如何使用webpack 的 splitChunks 配置项，将公共模块提取到单独的文件中

使用 webpack 的 splitChunks 配置项可以将公共模块提取到单独的文件中，具体步骤如下：

1. 在 webpack 配置文件中，添加以下代码：

optimization: {
  splitChunks: {
    chunks: 'all',
    name: 'common'
  }
}

2. 运行 webpack 构建，会在输出目录中生成一个名为 common 的文件，其中包含所有公共模块的代码。

注意：splitChunks 配置项会根据默认规则将公共模块提取到单独的文件中，如果需要更细粒度的控制，可以配置更多的参数，例如：

- minSize：模块的最小体积
- maxSize：模块的最大体积
- minChunks：模块被引用的最小次数
- maxAsyncRequests：按需加载时的最大并行请求数
- maxInitialRequests：入口点处的最大并行请求数
- automaticNameDelimiter：自动命名的分隔符
- cacheGroups：缓存组配置项，用于更细粒度的控制公共模块的提取行为。

相关问题

使用webpack 将splitChunks axios lodash单独打包 其他的库文件打包到vendor组

你的问题是关于使用 webpack 将 splitChunks、axios 和 lodash 单独打包，其他库文件打包到 vendor 组的方法。下面是一个示例 webpack 配置文件，你可以参考一下：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        },
        axios: {
          test: /[\\/]node_modules[\\/]axios[\\/]/,
          name: 'axios',
          chunks: 'all'
        },
        lodash: {
          test: /[\\/]node_modules[\\/]lodash[\\/]/,
          name: 'lodash',
          chunks: 'all'
        }
      }
    }
  },
  plugins: [
    new webpack.ProgressPlugin()
  ]
};

上述配置文件中，我们使用 optimization.splitChunks.cacheGroups 配置项来定义不同的缓存组。其中，vendor 缓存组用于打包其他库文件，而 axios 和 lodash 缓存组则用于单独打包 axios 和 lodash 库。

在每个缓存组中，我们可以使用 test 字段来匹配需要打包的模块。比如，使用 /[\\/]node_modules[\\/]/ 表示打包所有在 node_modules 目录下的模块。同时，我们还可以使用 name 字段来指定打包后的文件名，chunks 字段来指定使用哪些代码块进行打包。

最后，我们将 optimization.splitChunks.cacheGroups.vendor 缓存组作为公共模块来打包其他库文件，而 axios 和 lodash 缓存组则单独打包对应的库文件。这样做可以有效减少打包后的文件大小，提高页面加载速度。

使用webpack中的externals配置项如何配置

externals配置项用于配置那些不需要打包进应用程序中的第三方依赖。

在webpack配置文件中，可以使用以下方式配置externals:

module.exports = {
  externals: {
    jquery: 'jQuery'
  }
}

上面的配置表示jquery模块将不会被打包进应用程序中，而是在运行时通过全局变量jQuery来访问。

你也可以使用一个函数来配置externals，比如:

module.exports = {
  externals: function(context, request, callback) {
    if (request === 'lodash') {
      return callback(null, '_');
    }
    callback();
  }
}

上面的配置表示lodash模块将不会被打包进应用程序中，而是在运行时通过全局变量_来访问。