Why is webpack throwing an error with paths?

Question

JavaScript

Webpack throws this kind of error:

Here is the config itself:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


const PATHS = {
  src: path.join(__dirname, './src'),
  dist: path.join(__dirname, './dist'),
  js: 'js/bundle.js',
  css: 'css/style.css',
}

module.exports = {
  externals: {
    paths: PATHS,
  },
  entry: {
    app: PATHS.src,
  },
  output: {
    path: PATHS.dist,
    filename: PATHS.js,
    publicPath: '/',
  },
  module: {
    rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: '/node_modules/',
    }, 
    {
      test: /\.(jpe?g|png|gif|svg)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: "[path][name].[ext]",
          }
        },
        {
          loader: 'image-webpack-loader',
          options: {
            mozjpeg: {
              progressive: true,
              quality: 65
            },
            optipng: {
              enabled: false,
            },
            pngquant: {
              quality: '65-90',
              speed: 4
            },
            gifsicle: {
              interlaced: false,
            },
            svgo: {
              enabled: false,
            }
          }
        }
      ]
    },
    {
      test: /\.less$/,
      use: [
        {
        	loader: 'style-loader',
        },
        {
        	loader: MiniCssExtractPlugin.loader,
        }, 
        {
        	loader: "css-loader",
        	options: {
        		sourceMap: true,
        	}
        },
        {
        	loader: "postcss-loader",
        	options: {
        		sourceMap: true,
        		config:  {
        			path: 'postcss.config.js',
        		}
        	}
        },
        {
        	loader: "less-loader",
        	options: {
        		sourceMap: true,
        	}
        }
      ]
    },
    {
      test: /\.css$/,
      use: [
        {
        	loader: 'style-loader',
        },
        {
        	loader: MiniCssExtractPlugin.loader,
        }, 
        {
        	loader: "css-loader",
        	options: {
        		sourceMap: true,
        	}
        },
        {
        	loader: "postcss-loader",
        	options: {
        		sourceMap: true,
        		config:  {
        			path: 'postcss.config.js',
        		}
        	}
        },
      ]
    }]
  },
  	plugins: [
  	  new MiniCssExtractPlugin({
  	    filename: PATHS.css,
  	  }),
  	  new HtmlWebpackPlugin({
  	  	hash: false,
  	  	template: `${PATHS.src}/index.html`,
  	  	filename: 'index.html',
  	  }),
  	  new CopyPlugin([
  	  	{
      	  from: 'src/fonts',
      	  to: 'fonts',
      	},
      ]),
  	],
}

This is how I write the paths:

@font-face {
    font-family: 'Druk';
    src: url('/../fonts/Druk-Medium.eot');
    src: url('/../fonts/Druk-Medium.eot?#iefix') format('embedded-opentype'),
        url('/../fonts/Druk-Medium.woff2') format('woff2'),
        url('/../fonts/Druk-Medium.woff') format('woff'),
        url('/../fonts/Druk-Medium.ttf') format('truetype'),
        url('/../fonts/Druk-Medium.svg#Druk-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

This code is in the less file and is processed by webpack.
Why did you write the path this way? Because a similar error has already occurred before, when I tried to put a picture on the background in this way:
background: url(../img/img.jpg);
I was advised to do this:
background: url(/img/img.jpg);
And it worked by some miracle.
If you do the same trick with fonts, then webpack does not throw an error, but the path to the fonts is not correct, you can see this if you look in the css code after processing:

There must be two dots before the slash ..
Since the project structure is as follows:

That is, all the fonts are in the fonts folder, and the css code where these fonts are accessed from is in the css folder.
How can the problem be solved?

Answer 1

In fact, there is no problem, it just turned out to be the root relative path, when you upload the site to the server, everything will work.
With dots, the path is relative to the css file, and the error you most likely have is because less is in a folder inside css and webpack, when compiling, checks the paths relative to your less file, and not the future css.