Connecting webpack 4 fonts

I study the webpack - it turns out the following system. There is a main folder for development (src). It contains the following system

-src
 -assets
  -fonts
  -scss
  -js
 -views

In one of the files in the scss folder, I connect the styles

(
src: url('/assets/fonts/mp.ttf') format('truetype'),
      url('/assets/fonts/mp.woff') format('woff');
)

Fonts, views are copied from the folder using CopyWebpackPlugin to the dist folder, which has such a system:

-dist
 -assets
  -fonts
  -css
  -js
 -views

For fonts enabled in the webpack:

{
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                }
            },

Everything in the folders is there, and fonts, and styles, and scripts. But I get a trace. errors in the console. With what can be related? Do you need to connect fonts in some additional way?

File:///D:/assets/fonts/mp.ttf net::ERR_FILE_NOT_FOUND index.html:1 GET file:///D:/assets/fonts/mp.woff net::ERR_FILE_NOT_FOUND

But if you connect it in a different way:

{
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader',
                options: {
                    name: '../fonts/[name].[ext]',
                }

            },

Scss:

src: url('../fonts/mp.ttf') format('truetype'),
      url('../fonts/mp.woff') format('woff');

Then everything works, but the fonts folder is created, next to the dist- _- {folder[7]}

Author: Виктор Тюрин, 2020-09-03