webpack学习：minicssextractplugin,SplitChunksPlugin源码学习

mini-css-extract-plugin 是用来把所有css提取打包成一个文件的插件，uni把vue文件的css打包成wxss文件就是使用此插件完成的。这个插件还内置了一个处理css的loader

mini-css-extract-plugin的loader作用

位置在mini-css-extract-plugin/dist/loader，该loader只有一个pitch函数,每一个css文件走到picth时都会通过createChildCompiler方法创建了一个childCompiler，childCompiler会把其他的css相关loader走一遍，
然后返回结果通过addDependencies方法，在module里面新加入了一个cssModule

mini-css-extract-plugin

主要操作在renderManifest钩子里，新增了一个Manifest，render方法的核心在renderContentAsset，该方法把每一个chunk里的cssModule内容合并成一个然后返回，剩下的就交给webpack把返回回来的source变成文件，然后html-webpack-plugin把所有的文件放到一个html里。

该插件配合uni把vue打包成小程序存在一个问题：extract插件有2个关于mainTemplate钩子是用来处理异步加载的css的。会在runtime.js里面存储所有异步的组件路径，等异步chunk加载时会把异步chunk的css一起加载，本身是没有问题的，但是配合uni使用有2个问题

1 小程序是通过包来加载的，所以相关的异步代码并没有执行，也就是说runtime.js里存在没有使用的代码，还占了主包的体积。
2 uni把所有组件的引用都改为异步引用，其实这是没必要的，第一点说了，小程序是一个包一起加载好的。
2点加起来导致来主包变大，我公司的就占据了70kb!!!。

SplitChunksPlugin作用大家都知道，它是如何拆分成2个chunk的我比较好奇所以去研究了下

SplitChunksPlugin 如何拆分chunk的

// 生成一个新chunk
newChunk = compilation.addChunk(chunkName);

// usedChunks 是使用这个多余module的chunks
// Walk through all chunks
for (const chunk of usedChunks) {
  // Add graph connections for splitted chunk  把新生成的chunk插入到使用它的chunk的chunkgroup里
  chunk.split(newChunk);
}
// Add all modules to the new chunk 把有关的module都从旧的chunk里删除，添加到新的chunk里
for (const module of item.modules) {
	if (typeof module.chunkCondition === "function") {
		if (!module.chunkCondition(newChunk)) continue;
	}
	// Add module to new chunk
	GraphHelpers.connectChunkAndModule(newChunk, module);
	// Remove module from used chunks
	for (const chunk of usedChunks) {
		chunk.removeModule(module);
		module.rewriteChunkInReasons(chunk, [newChunk]);
	}
}