vue-cli是怎么将.vue文件和.scss文件中的样式抽离出来生成单独的.css文件的？

Question

我们知道通过vue-loader可以将配置好的CSS、JS相关loader应用到.vue文件中的CSS和JS代码块
上，比如你在.vue文件中使用的scss来编写样式，vue-loader可以将scss-loader应用到.vue文
件中的scss。现在我有两个疑问，每次打完包，都可以看到包里面的css文件夹中有很多chunk-[hash].css的文件，这些文件是怎么被单独从.vue文件中抽离出来的？这些文件名称是怎么生成的？

据我所知将css单独抽离出来生成文件的是使用MiniCssExtractPlugin来做这件事件的,但是我使用vue相关命令将vue-cli中webpack配置打印出来，发现并没有这个插件，那vue-cli到底是怎么做的呢？

Answer 1

vue-loader的理解是对的。但是@vue/cli的说法不太严谨，@vue/cli现在是一个完整的工具集，它具有更多的功能，实际上承担webpack打包任务的是@vue/service这个子包。

所以实际上是mini-css-extract-pulgin 实现了css extract的功能
你可以在这里看到关于css extract plugin的配置
https://github.com/vuejs/vue-...

css extract 只在build的模式使用，因为我们在dev环境应该直接style标签内联以更好的style hot reload。所以
你应该使用production mode inspect

vue-cli-service inspect --mode=production