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]}