抽离公共代码

基本使用

    optimization: {

        // 分割代码块
        splitChunks: {
            chunks: 'all',
            /**
             * initial 入口chunk，对于异步导入的文件不处理
                async 异步chunk，只对异步导入的文件处理
                all 全部chunk
             */

            // 缓存分组
            cacheGroups: {
                // 第三方模块
                vendor: {
                    name: 'vendor', // chunk 名称
                    priority: 1, // 权限更高，优先抽离，重要！！！
                    test: /node_modules/,
                    minSize: 0,  // 大小限制
                    minChunks: 1  // 最少复用过几次
                },

                // 公共的模块
                common: {
                    name: 'common', // chunk 名称
                    priority: 0, // 优先级
                    minSize: 0,  // 公共模块的大小限制
                    minChunks: 2  // 公共模块最少复用过几次
                }
            }
        }
    }

在react 项目使用

        webpackConfig.optimization.splitChunks = {
        chunks: 'all',
        cacheGroups: {
          antd: {
            name: 'antd-chunk',
            test: /antd/,
            priority: 100,
          },
          reactDom: {
            name: 'reactDom-chunk',
            test: /react-dom/,
            priority: 99,
          },
          vendors: {
            name: 'vendors-chunk',
            test: /node_modules/,
            priority: 98,
          },
        },
      }
    }
    ```