Webpack 3: what's the problem with css and file loaders?

Question

webpack

According to the lessons of I. Kantor (although I understand that they are already old) I tried to deal with the assembly of files + along the way I surfed the Internet, since the lessons are already old, but to no avail.
In general, here is the webpack config:

'use strict';

const NODE_ENV = process.NODE_ENV || 'development';
const webpack = require('webpack');
const path = require('path');

module.exports = {

  context: path.resolve(__dirname, 'frontend'),

  entry: {
    main: './main'
  },

  output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: '/',
    filename: '[name].js',
    library: '[name]'
  },

  watch: NODE_ENV === 'development',

  watchOptions: {
    aggregateTimeout: 100
  },

  devtool: NODE_ENV === 'development' ? 'cheap-inline-module-source-map' : null,

  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
  ],

  module: {

    rules: [

      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env'],
            plugins: ['transform-runtime']
          }
        }
      },

      {
        test: /\.css$/,
        use: ['css-loader']
      },
      
      {
        loader: 'file-loader',
        query: {
          useRelativePath: true
        }
      }

    ],

  }

};

here is the structure:

this is the code that is in menu/index.js, which is included in main.js

import './menu.css';

export default class Menu {
  constructor(options) {
    this.elem = document.getElementById('menu');

    this.title = this.elem.querySelector('.title');

    this.title.onclick = () => this.elem.classList.toggle('open');
  }
}

and at the output, the following file fc9dd5daeb344e070521a4e603103ca7 gets into the public folder:

its contents are:

'use strict';

import Menu from './menu';

let pandaMenu = new Menu({
  title: 'Меню панды',
  items: [{
    text: 'яйца',
    href: '#eggs'
  }, {
    text: 'Мясо',
    href: '#meat',
  }]
});

document.body.appendChild(pandaMenu.elem);

I note that the css-loader and file-loader are not connected for me as in the screencast, the fact is that, like Ilya, they do not work, I put them on the docks https://webpack.js.org/loaders/css-loader / and https://github.com/webpack-contrib/file-loader.
Can you please tell me why I can't collect files? what am i missing?
I want to create a project using webpack, but it's a 2-day headache with building files...

Answer 1

Kantor's lessons are very outdated, respectively, the resulting config is also.
1. file fc9dd5daeb344e070521a4e603103ca7 - this is probably the source map (google it). 2. In order to include css in separate files, you need extract-text- webpack
-plugin half an hour.