Webpack 5: what do these build errors mean?

Question

webpack

Can you explain what these errors mean and why they appear?

webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './public/js/main.js',
  output: {
    filename: './public/build/bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules']
  },
  module: {
    loaders: [
      {
        test: /\.js/,
        loader: 'babel',
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|eot|ttf|woff|woff2\?v=4.7.0|woff\?v=4.7.0|eot\?v=4.7.0|ttf\?v=4.7.0|svg\?v=4.7.0|video.play.png)$/,
        type: 'var',
        loader: 'raw-loader',
      },
    ]
  },

  plugins: [
    new ExtractTextPlugin('./public/build/bundle.css')
  ]
};

When building I get the following errors (there's just a big text so pastebin)

Explain why these errors appear? what is the reason? I just don't even know how to google to find a solution to this problem.

Answer 1

:warning: Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

https://v4.webpack.js.org/plugins/extract-text-web...
You need https://v4.webpack.js.org/plugins/mini-css-extract...