一：定义

Chunk是Webpack打包过程中，生成的js文件，以文件为单位，一堆module的集合。

打包是从一个入口文件开始，也可以说是入口模块，入口模块引用这其他模块，模块再引用模块。

通过引用关系逐个打包模块，这些module就形成了一个Chunk

module，chunk 和 bundle 是同一份逻辑代码在不同转换场景下的三个名字： 直接写出来的是 module，webpack 处理时是 chunk，浏览器可以直接运行的 bundle

二：产生途径

1：配置 entry 多入口，打包会成多 chunk

2：代码中自动使用 import() 加载模块

3：使用 splitChunks 插件，配置分离规则，webpack 自动将满足规则的 chunk 分离

4：webpack5里可以使用entry下的runtime配置，将webpack的运行时函数如__webpack_require__.f、webpack_require.r这些单独抽离出来分割为chunk

三：总结

1：将应用程序拆分成多个chunk可以提高应用程序的性能。

2：通过按需加载模块，可以减少应用程序的启动时间和资源占用。

3：Webpack提供了一些代码分离的策略，如代码分离插和代码分离点，以帮助开发人员更好地控制chunk的生成和管理。

四：代码演示

const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: ['react', 'react-dom']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js'
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  }
};