webpack抽离 公共代码

webpack在进行抽离公共代码的时候分为两种，一种是公共模块，一种是第三方模块；
对于公共模块：不需要重复打包，抽离成一个单独的公共模块文件，然后引用即可；
对第三方模块：一般不会轻易改变，所以就单独抽离一个第三方模块的文件，引用即可；

对于这种公共类的模块，没必要在每次被引用的时候都打包一次，可以把他抽离成一个单独的模块文件引用就可以了

chunk是指webpack在进行模块依赖分析的时候，代码分割出来的代码块，module是开发中的单个模块

一般来讲，这种操作会在生产环境做配置，具体配置如下

optimization: {
    splitChunks: {
    	/*
    		all: 对同步 异步 代码都做分割；
    		async: 只对异步代码做分割；
    		initial: 只对同步代码做分割；
    		同步代码：例如 import lodash from 'lodash'
    		异步代码：例如 import ('loadsh')
    	*/
        chunks: 'all',
        name: true,
        automaticNameDelimiter: '-',  // 模块间的连接符，默认为"~"
        cacheGroups: {
        	// 第三方模块
            vendors: {
				name:'vendor', // 每个组的名字
				priority: 1  // 优先级，越小优先级越高
				// 检测模块是否来自于node_modules,是否通过npm下载的
				test: /[\\/]node_modules[\\/]/, 
				// 设置代码分割的最小界限；
				// 可以设置成 5 * 1024 大小 5kb
				// 大于 5kb 的文件才会做分割，也可以设置为 0
				minSize: 5* 1024, 
				minChunks:1  // 检测模块被引用几次就可以单独打包
            },
            // 公共模块
            common: {
            	name:'common',
                priority: 0
				minSize:0, 
				minChunks:2
            },
            default: {  // 默认设置，可被重写
                minChunks: 2,
                priority: -20,
                // 如果本来已经把代码提取出来，则重用存在的而不是重新产生
                reuseExistingChunk: true  
            }
        }
    }
}

打包成功后在dist文件夹下可以看到

vendor.9ds89sds.js
common.0fd4ce01.js