前言
大家都知道 mini-css-extract-plugin 是用来替代 extract-text-webpack-plugin 的新一代产品，不光可以自定义抽取规则，还可以配合 webpack 的分块 splitChunks 配置自动抽取。
使用
默认配置
在 vue-cli4 中 build 生产环境的时候默认使用了 mini-css-extract-plugin 抽取 css ＋optimize-cssnano-plugin 压缩 css，其默认配置如下：
/* config.plugin('extract-css') */new MiniCssExtractPlugin({filename: 'assetsDir/css/[name].[contenthash:8].css',chunkFilename: 'assetsDir/css/[name].[contenthash:8].css'}),/* config.plugin('optimize-css') */new OptimizeCssnanoPlugin({sourceMap: false,cssnanoOptions: {preset: ['default',{mergeLonghand: false,cssDeclarationSorter: false}]}})
其中：
- assetsDir：
filename和chunkFilename里的 assetsDir 是相对于outputDir的目录（见官方 配置文档 ）。 - 默认使用了 contenthash ，是比较友好的，有关三种 hash （ hash、chunkhash、contenthash ）的区别请自行百度 ~
自定义配置方法
我们使用 webpack chain 如下形式修改即可：
chainWebpack(config) {config.when(process.env.NODE_ENV !== 'development', config => {config.plugin('extract-css').tap(options => {options[0].filename = 'static/css/[name].[hash:8].css'return options})}
}
注意 mini-css-extract-plugin 只有在生产环境才会被 vue-cli 启用，如果在开发环境还想使用，请安装该插件再自行注入。
开发环境
安装：
yarn add -D mini-css-extract-plugin
注入：
chainWebpack(config) {config.plugin('mini-css-extract-plugin').use(require('mini-css-extract-plugin'), [{filename: '[name].[contenthash].css',chunkFilename: '[id].[contenthash].css'}]).end()
}
更多配置请参考 mini-css-extract-plugin 项目：webpack-contrib / mini-css-extract-plugin
总结
一般情况 mini-css-extract-plugin 是用来配置 contenthash 后抽取 css 实现持久化缓存 css 的（即只有 js 改变，css 的 hash 不会连带改变，用户就不需要再请求相同内容的 css ，使用本地缓存即可，提高体验感）
但是在 vue 中，对单文件适用的 css 在 scoped 情况下会附带自己的 hash （ .classname[data-v-hash] ），从而使得 mini-css-extract-plugin 不能实现 css 持久化缓存的功能。
附：
css 压缩插件 optimize-cssnano-plugin 官方项目地址：intervolga / optimize-cssnano-plugin
他比 optimize-css-assets-webpack-plugin 在源地图上更加准确。