Para quem está se aventurando no webpack 4: 'mini-css-extract-plugin'

Por buscar utilizar as versões mais recentes no decorrer das aulas, me deparei com a seguinte situação: "Com o webpack v4, o extract-text-webpack-plugin não deve ser usado para css. Use o mini-css-extract-plugin ." Bem... Sou um pouco leigo pras coisas, mas no final, conseguir alcançar o mesmo objetivo que o esperado com o tal do 'extract-text-webpack-plugin'. Segue a dica para quem quiser se aventurar... Arquivo package.json:

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-dev": "webpack --config webpack.config.js",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.5.0",
    "reflect-metadata": "^0.1.13"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-es2017": "^6.24.1",
    "css-loader": "^3.5.3",
    "file-loader": "^6.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

e por fim, o webpack.config.js:]

const path = require('path'); //um modulo nativo do node!
//const extractTextPlugin = require('extract-text-webpack-plugin');// DEPRECIADO [foi passado na aula]
const miniCssExtractPlugin = require('mini-css-extract-plugin'); //RECOMENDADO [Ele cria um arquivo CSS por arquivo JS que contém CSS.]


module.exports = {
    plugins: [
        new miniCssExtractPlugin({
            filename: 'styles.css' //o nome do arquivo a ser gerado[na aula pasava no construtor]
        })
    ],  
    entry: './app-src/app.js', //ponto de entrada. especifico qual será o 1º modulo a ser carregado
    output: { //crie o arquivo bundle.js na pasta dist[esta será criada apartir do diretorio atual 'client', informada pelo _dirname]
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),//path.resolve() criará o caminho completo até a pasta dist
        publicPath: 'dist'//qdo servidor rodando, o bundle.js é gerado em memoria pelo webpackdevserver. aqui defino que este arquivo estara dentro da past dist
    },
    module: {//o module permite ter varias regras de execução
        rules: [//cada regra pode usar um módulo específico quando aplicada. aqui sera usado o loader
            {
                test: /\.js$/, // indica a condição na qual nosso loader será aplicado. Usamos a expressão regular /\.js$/ para considerar todos os arquivos que terminam com a extensão .js
                exclude: /node_modules/,//Durante este processo, excluímos a pasta node_modules, pois não faz sentido processar os arquivos dela
                use: {//dentro de use, indicamos o loader que será utilizado, em nosso caso o babel-loader
                    loader: 'babel-loader'//babel-loader: A ponte de ligação entre o Webpack e o babel-core
                }
            },
            {
                test: /\.css$/, //considere tds os arquivos com extensao css
                use: [miniCssExtractPlugin.loader, 'css-loader']
                /* use: miniCssExtractPlugin.extract({
                    fallback: 'style-loader', //qual loader será usado em casos de falha,
                    use: 'css-loader'   // qual loader será usado em caso de sucesso
                }) */
            },
            { 
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=application/font-woff' 
            },
            { 
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            { 
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'file-loader' 
            },
            { 
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=image/svg+xml' 
            }  
        ]
    }
}