vue-cli的vue.config.js

vue-cli管理vue项目，一些配置写在vue.config.js下。vue-cli内置了webpack作为打包工具，这些配置也是写在vue.config.js了。
一些简单配置。。。看官方文档吧

使用webpack的optimization.splitChunks.cacheGroups来指定打包拆分规则

module.exports = {
    //configureWebpack是vue-cli3后自己维护的，最终通过webpackMerge合并到webpack配置对象
    configureWebpack: config => {
        /** cacheGroups的子属性是一个对象，这个对象的属性指定具体的打包规则
         *  name：指定打包后文件的名称，具体打包后还会加上一个hash
         *  test：匹配规则
         *  chunks：指定哪些文件可以应用这个规则优化，值域：'all'、'initial'、'async'，all为所有模块都应用这个规则，initial为初始化模块才应用这个规则，即第一次加载时就需要用到文件，'async'异步，即按需加载的模块
         * 【这样调用config.optimization.splitChunks({cacheGroups:{common:{name:...}}})
         * 但是遇到TypeError:config.optimization.splitChunks is not a function报错
         * 所以写成以下这样，事实上config.optimization.splitChunks就是一个对象而已的子属性
         * 而已，所以肯定不可以把splitChunks对象当函数来用】
         */
        config.optimization.splitChunks.cacheGroups.common = {
            name: 'echarts',
            test: /[\\/]node_modules[\\/]?echarts[\\/]?/, // can customize your rules
            minChunks: 1, //  minimum common number
            priority:5,
            reuseExistingChunk: true,
            minSize:1,
            chunks:'all'
        }
    },
  
    //vue.config.js中还可以使用webpack-chain这个库（github上）来配置webpack
    chainWebpack: config => {
        config.optimization.splitChunks({
            vendors:{
                name'chunk-vendors',
                test:/[\\/]node_module[\\/]/,
                priority: -5,
            	chunks:'all'
            },
            commons:{
                ....
            }
        })
    }
}

拆分完包，似乎还未能完成；多页面应用中，拆出来的chunk，html要怎么知道哪些chunk它需要用？
- 答案是使用webpack的htmlwebpackplugin
额外的，可以使用npx vue-cli-service inspect查看本配置文件最终得到的webpack配置，可直接写到一个文件里面查看npx vue-cli-service inspect > config.js