webpack代码分割splitChunks 如何给分割的chunks取名

在webpack的配置文件中，可以使用`optimization.splitChunks.cacheGroups`来配置代码分割的规则，其中`name`属性可以用于给分割出的chunk命名。例如，可以按以下方式配置：

optimization: {
  splitChunks: {
    cacheGroups: {
      common: {
        name: 'common',
        test: /[\\/]node_modules[\\/]/,
        chunks: 'all',
      },
      styles: {
        name: 'styles',
        test: /\.css$/,
        chunks: 'all',
        enforce: true,
      },
    },
  },
},

以上配置将会把所有来自`node_modules`目录下的模块打包到名为`common`的chunk中，把所有`.css`文件打包到名为`styles`的chunk中。可以根据实际需求自定义其他的cacheGroups，给它们取不同的名字。

相关问题

webpack代码分割splitChunks 给分割的chunks取名 要求缓存组+库名+hash

可以按照以下方式配置，使用`cacheGroups`的`name`属性结合`[name]`、`[id]`、`[contenthash]`等占位符来构造chunk名称：

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        name: 'vendor',
        test: /[\\/]node_modules[\\/]/,
        chunks: 'all',
      },
      common: {
        name: 'common',
        chunks: 'all',
        minChunks: 2,
        priority: -10,
        reuseExistingChunk: true,
      },
    },
  },
},
output: {
  filename: '[name].[contenthash].js',
},

以上配置将会把所有来自`node_modules`目录下的模块打包到名为`vendor`的chunk中，把所有符合`minChunks`条件的公共模块打包到名为`common`的chunk中，并通过`[contenthash]`占位符生成带有hash的chunk名称。这样做的好处是，当源代码发生变化时，只会重新打包受影响的chunk，其他chunk的hash值仍然保持不变，能够更好地利用浏览器缓存，提高页面加载速度。

webpack配置 将splitChunks分割的代码打包js目录下

要将splitChunks分割的代码打包到js目录下，可以在webpack配置文件中进行如下配置：

module.exports = {
  // ...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'common',
      minChunks: 2,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: -10,
          chunks: 'all'
        }
      }
    }
  },
  output: {
    path: path.resolve(__dirname, 'js'),
    filename: '[name].[chunkhash].js'
  }
}

其中，optimization.splitChunks配置用于分割代码，output配置用于指定打包生成的文件输出目录和文件名。这里将打包生成的所有js文件都放在了js目录下，文件名格式为[name].[chunkhash].js，其中name表示文件名，chunkhash表示文件的hash值。这样每次打包生成的文件名都不同，有助于缓存更新。