使用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 缓存组则单独打包对应的库文件。这样做可以有效减少打包后的文件大小，提高页面加载速度。