打包运行时抛出chunk name [mini-css-extract-plugin] Conflicting order. Following module has been added错误！-Toy模板网

这篇具有很好参考价值的文章主要介绍了打包运行时抛出chunk name [mini-css-extract-plugin] Conflicting order. Following module has been added错误！。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题描述

今天在执行npm run build 时，控制台出现一大片警告错误，虽然不影响项目打包，但是看着碍眼，报错如下：
打包运行时抛出chunk name [mini-css-extract-plugin] Conflicting order. Following module has been added错误！,css,javascript,前端,vue.js,webpack
首先我们看到这个错误是由，[mini-css-extract-plugin]抛出的，那么这个插件有什么作用？这个插件主要是将css抽离出来到一个文件里面，它的特点是不会重复编译css文件

所以引起这些警告的原因就是我们在项目中引用组件的顺序不同，导致插件遇到了编译过的css文件，才会抛出这个错误

举个例子：

页面pageA中引入的componentA和componentB
import A from '@/components/A';
import B from '@/components/B';

页面pageB中也引入的componentA和componentB， 但是组件A和组件B的引入顺序和pageA中的不一样，这个时候就会抛出警告
import B from '@/components/B';
import A from '@/components/A';

借鉴文章：https://www.jianshu.com/p/0597b24b2ef7

解决办法

方法一：修改组件的引入顺序（推荐使用）

依次按照警告提示修改报错文件里组件的引入顺序，让组件的引入顺序尽量保持一致

推荐原因：可以避免重复编译css文件，可以提升打包的速度

方式二：编译时忽略排序

在vue.config.js 下方，添加如下配置文章来源地址https://www.toymoban.com/news/detail-651947.html

// vue.config.js
module.exports = {
    css: {
        extract: { ignoreOrder: true },
    },
}

到了这里，关于打包运行时抛出chunk name [mini-css-extract-plugin] Conflicting order. Following module has been added错误！的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！