为什么mini-css-extract-plugin不能以更少的成本创建CSS文件？

Question

我尝试了extract-text-webpack-plugin来提取CSS文件，但是失败了。 webpack的版本是4.16.3，所以我使用mini-css-extract-plugin来完成，也失败了！我认为这与这些插件的配置无关。这是我的webpack配置。 the code repo is here。成功打包，但没有CSS文件。

const baseConfig = require('./webpack.config.base')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const merge = require('webpack-merge')
const path = require('path')
const productionConfig = merge(baseConfig, {
  mode: 'production',
  entry: {
    app: path.join(__dirname, '../src/index.js'),
    vendor: ['vue', 'vue-router', 'vuex', 'axios', 'element-ui']
  },
  output: {
    path: path.join(__dirname, '../build/public'),
    filename: 'js/[name].bundle.js',
    chunkFilename: 'js/[name].[chunkhash:8].chunk.js',
    publicPath: './public'
  },
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ],
        include: [
          path.resolve(__dirname, 'node_modules')
        ]
      },
      {
        test: /\.less/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ],
        include: [
          path.resolve(__dirname, 'node_modules')
        ]
      },
      {
        test: /\.(gif|jpg|jpeg|png|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024,
              name: '[name].[hash:8].[ext]',
              publicPath: './public/img',
              outputPath: '/img'
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'file-loader',
           options: {
              limit: 80000,
              name: '[name].[hash:8].[ext]',
              publicPath: './public/fonts',
              outputPath: '/fonts'
          }
        }
      ]
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
           vendor: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendor',
              chunks: 'all'
          }
        }
      },
      runtimeChunk: true
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].[chunkhash:8].css',
        chunkFilename: '[id].css'
      })
    ]
})
module.exports = productionConfig