如何在 Vue CLI 5 中将样式提取到独立的文件中

在 Webpack 4 之前提取内容到文件中用的是 extract-text-webpack-plugin 插件，但在 Webpack 4 以及现在最新的 Webpack 5 下面，已经换成了 mini-css-extract-plugin 插件来完成相关任务。

Vue CLI 的配置文件默认是 vue.config.js，在 chainWebpack 下加入如下配置来完成样式抽取

config.when(process.env.NODE_ENV !== 'development', config => {
  config.plugin('extract-css').tap(options => {
    // 文件位置是相对于 output 的
    options[0].filename = 'css/[name].[hash:8].css'
    return options
  })
})