webpack學習：mini-css-extract-plugin,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]);
	}
}