[JavaScript知识库]关于mini-css-extract-plugin在使用过程中出现冲突的问题

今天在优化打包的过程中，运行npm run build后，总是会出现冲突的警告信息，而且对于我的这个项目而言出现了几十条的冲突提示(如下)。

问题排查
首先我以为可能是由于我新引入的优化方面的插件导致了原先的打包出现了问题，所以我注释掉了所有新加入的打包模块，再次打包，问题依旧出现，所以我又把新引入的插件取消了注释，排除了是我新引入的缘故(因为新引入后打包结果是成功的，并且我发现这些冲突并不会影响打包后的项目的运行以及样式)

然后对照着错误发现基本上都是跟mini-css-extract-plugin插件相关的问题，并且网上也有人遇到了差不多类似的问题。

原因在于mini-css-extract-plugin插件在打包过程中对于css文件的引入是有顺序要求的，打个比方：

// A.tsx
import './a.css';
import './b.css';

// B.tsx
import './b.css';
import './a.css';

这种情况下，你的打包过程就会出现冲突，因为你两个文件中引入相同样式的顺序不统一，不过在项目中大部分的情况下出现问题可能主要是因为你在引入自己抽取的公共组件的时候出现了顺序不统一的情况而引起的，因为通常我们在组件中引入样式文件基本上不会出现多个的情况

所以如果有小伙伴也遇到了这种情况，可以对照冲突排查一下看看最近新添加的组件是否出现了引入顺序的问题。

但是如果出现了大量的这种冲突，很难一个个排查修改的话，在确保不会影响到项目本身的情况下可以选择添加配置项忽视就可以啦。

// 在webpack配置中的插件配置里添加ignoreOrder为true即可忽视掉打包过程中出现的冲突警告
module.exports = {
	plugins: [
		new MiniCssExtractPlugin({
	        ignoreOrder: true,
	    }),
	]
}

这个问题在官方的issue里也有提到，大家有兴趣可以看看
官方描述