webpack font can't resolve

Question

I am trying to include font files in my webpack with a bit of difficulty.

font.css

@font-face {
    font-family: 'LatoBlack';
    src: url('./font/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
         url('./font/Lato-Black.woff') format('woff'), /* Modern Browsers */
         url('./font/Lato-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

Webpack.base.Config

module.exports = {
  module: {
    loaders: [
      { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=./font/[name].[ext]' },
      { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=./font/[name].[ext]' },
      { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=./font/[name].[ext]' },
      { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=./font/[name].[ext]' },
      { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=./font/[name].[ext]' }
    ]
  }
};

Structure

webpack.prod.conf

module.exports = new Config().extend('./webpack.base.config.js').merge({
  entry: [
    './src/index.js'
  ],
  devtool: 'eval',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ],
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'app/www'),
    publicPath: '/app/www'
  },
});

Error

ERROR in ./~/css-loader?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[local]_[hash:base64:5]"}!./~/postcss-loader?sourceMap&parser=postcss-scss!./src/components/shared/main.css
Module not found: Error: Can't resolve './font/Lato-ThinItalic.ttf' in '/var/www/kindred/src/components/shared'
 @ ./~/css-loader?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[local]_[hash:base64:5]"}!./~/postcss-loader?sourceMap&parser=postcss-scss!./src/components/shared/main.css 6:5744-5781
 @ ./src/components/shared/main.css
 @ ./src/index.js
 @ multi ./src/index.js

webpack.base.config

/* eslint-disable filenames/match-regex, import/no-commonjs, import/unambiguous */

const path = require('path');
const {environment} = require('webpack-config');

module.exports = {
  module: {
    loaders: [
      {
        test: /dashjs\/dist\/.*/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules\/.*/,
        use: ['babel-loader']
      },
      {
        test: /\.(jpg|png)$/,
        loader: 'url?limit=25000'
      },
      {
        test: /\.svg$/,
        use: ['babel-loader', 'svg-react-loader']
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader?sourceMap',
            query: {
              modules: true,
              sourceMap: true,
              importLoaders: 2,
              localIdentName: environment.get('cssIdent')
            }
          },
          'postcss-loader?sourceMap&parser=postcss-scss'
        ],
      },
      // Font Definitions
      { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=./font/[name].[ext]' },
      { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=./font/[name].[ext]' },
      { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=./font/[name].[ext]' },
      { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=./font/[name].[ext]' },
      { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=./font/[name].[ext]' }
    ]
  }
};

So how can I make it load? :O

Answer 1

Due to having relative webpack is not able to find according to its current location. In the module rules add this and install file-loader

npm install --save-dev file-loader

{
        test: /\.(svg|eot|ttf|woff|woff2)$/,
        use:'file-loader',
        options: {
            name: 'images/[name].[hash].[ext]'
       }

},

Edit: Usually relative url can be solved in three ways

-use absolute path

-use options and set url to false

use:[
        {
            loader: 'css-loader',
            options: {url: false}
        }
    ]

-use raw loder as it will loder url as string

use: ['raw-loader', 'css-loader'],

Answer 2

Webpack 5 or later versions

Don't need any loader installation, just add in webpack.config.js.

   module: {
    rules: [
      {
       test: /\.(woff|woff2|eot|ttf|otf)$/i,
       type: 'asset/resource',
      },
    ],
  },