有时候对于多次重复引入的第三方和公共模块，我们可以单独打包成chunk，然后在各个文件内引入公共的chunk

    1.   optimization: {
    2.     // 代码分割
    3.     splitChunks: {
    4.       chunks: 'all',
    5.       // 缓存分组
    6.       cacheGroups: {
    7.         vendor: {
    8.           name: 'vendors',  // chunk名称
    9.           priority: 1, // 权限更高，优先抽离
    10.           test: /node_modules/,
    11.           minSize: 0, // 大小限制
    12.           minChunks: 1 // 最少复用过几次
    13.         },
    14.         common: {
    15.           name: 'common', // chunk名称
    16.           priority: 0,
    17.           minSize: 0, // 公共模块的大小限制
    18.           minChunks: 2  // 公共模块最少复用过几次
    19.         }
    20.       }
    21.     }
    22.   }

    这样做可以让公共的，第三方包打在同一个代码块内，其他需要的地方直接引用该模块，不需要重复打包。对于多入口打包形成的html配置如下：

    1. plugins: [
    2.     new HtmlWebpackPlugin({
    3.       template: path.join(srcPath, 'index.html'),
    4.     filename: 'index.html',
    5.     // chunks 表示该页面要引用哪些 chunk （即上面的index和other）
    6.     chunks: ['index', 'vendors', 'common']    // 引入vendors 和 common
    7.   }),
    8.     new HtmlWebpackPlugin({
    9.       template: path.join(srcPath, 'other.html'),
    10.     filename: 'other.html',
    11.     chunks: ['other', 'vendors', 'common']    // 名字与上面的name对应
    12.   })  
    13. ]