How to add minify css in webpack?

Question

css

1) Webpack creates a style.min.js and style.min.css file, what am I doing wrong?
2) After I added

{
  loader: 'css-loader',
  options: {
    minimize: true
  }
}

webpack started minifying the style.min.js file, after which an error occurs. How to write the config file correctly?
Thanks in advance.

'use strict'

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    bundle: './src/app.js',
    style: './styles/main.sass'
  },
  output: {
    filename: '[name].min.js',
    path: path.resolve(__dirname, 'client/public')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      },
      {
        test: /\.pug$/,
        use:  [
          'html-loader',
          {
          loader: 'pug-html-loader',
          options: {
            data: {}
          }}
        ]
      },
      {
        loader: 'css-loader',
        options: {
          minimize: true
        }
      },
      {
        test: /\.sass$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
          publicPath: path.resolve(__dirname, 'styles/')
        })
      }
    ]
  },
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.json', '.jsx', '.css', '.pug', '.sass']
  },
  //watch: true,
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: true
      }
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'views/index.pug'),
      inject: 'body'
    }),
    new ExtractTextPlugin({
      filename: '[name].min.css',
      disable: false,
      allChunks: true
    })
  ]
};

Answer 1

When you add styles as an entry, they are wrapped in a js script that simply inserts those styles into the page when it loads.
The usual case for creating a separate css bundle:

// в вашем './src/app.js'
import './styles/main.sass';

// в конфиге вебпака все надо упростить
// entry
{
  app: './src/app.js',
}
// module.rules
{
  test: /\.sass$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      'css-loader',
      'sass-loader'
    ]
  })
}
// plugins
new ExtractTextPlugin('styles/[name].css')

We change the name of entry, for readability, so as not to do all sorts of bundle.bundle.js or bundle.min.js,
Your styles will get the same name as the main js file - total app.min.js and app.min.css
HtmlWebpackPlugin will automatically pull links to these files.