通过使用webpack进行代码打包的时候，所有的代码最终都被打包到一起，如果应用非常负责，模块也特别多的话，那么bundle体积会过大，但是大多数情况下，并不是每个模块在启动时都是必须要加载的，所用应该分包，按需加载，提高效率。webpack提供了代码分割的功能，他通过把我们的模块按照所设计的规则打包到不同的文件中，从而提高响应速度。

多入口打包

多入口打包一般适用于传统的多页应用程序，最常见的就是一个页面对应一个打包入口，对于不同页面之间，公共部分单独提取到公共的结果中。
在webpack配置文件中，设置多个入口，表示多入口文件打包，同时在输出的时候，通过占位符的方式，设置多个打包结果文件。

  1. module.exports = {
  2.     entry: {
  3.         index: "./src/index.js",
  4.         album: "./src/album.js"
  5.     },
  6.     output: {
  7.         // name 指向的是入口中设置的key
  8.         filename: '[name].bundle.js'
  9.     },
  10.         plugins: [
  11.       new HtmlWebpackPlugin({
  12.         filename: "index.html",
  13.         // 选择当前html文件使用哪个打包后的文件
  14.         chunks: ["index"],
  15.       }),
  16.       new HtmlWebpackPlugin({
  17.         filename: "album.html",
  18.         // 选择当前html文件使用哪个打包后的文件
  19.         chunks: ["album"],
  20.       }),
  21.     ],  
  22. };

在多入口打包的时候，不同的入口中肯定会有公共模块出现，所以还需要将公共模块进行提取。

  1. module.exports = {
  2.     entry: {
  3.         index: "./src/index.js",
  4.         album: "./src/album.js",
  5.     },
  6.     output: {
  7.         // name 指向的是入口中设置的key
  8.         filename: "[name].bundle.js",
  9.     },
  10.     plugins: [
  11.         new HtmlWebpackPlugin({
  12.             filename: "index.html",
  13.             // 选择当前html文件使用哪个打包后的文件
  14.             chunks: ["index"],
  15.         }),
  16.         new HtmlWebpackPlugin({
  17.             filename: "album.html",
  18.             // 选择当前html文件使用哪个打包后的文件
  19.             chunks: ["album"],
  20.         }),
  21.     ],
  22.     optimization: {
  23.         splitChunks: {
  24.             // 表示把所有的公共模块都提取到一个bundle文件当中。
  25.             chunks: "all",
  26.         },
  27.     },
  28. };

动态导入

表示需要用到某个模块时，再加载这个模块，这样可以极大的节省我们的带宽和流量。动态导入的模块会被自动分包。

魔法注释

用于在动态导入的时候，给自动加载的bundle文件添加名称。
语法：/ webpackChunkName: index /