Loading fonts and images with webpacker

Question

I'm trying to simply load assets (fonts/images) into a Rails project using Webpacker. It's proven to be hilariously more difficult than it should be.

I'm using React on Rails 11.0.4, Rails 5.1.6, and Webpacker 3.5.3.

I've tried creating custom loader files to append to the webpack configuration, as referenced here.

// file.js

module.exports = {
  test: /\.(ttf|eot|otf)$/,
  use: {
    loader: "file-loader",
    options: {
      name: "fonts/[name].[ext]",
    }
  }
}

// environment.js

const { environment } = require('@rails/webpacker')
const file = require('./file')

environment.loaders.prepend('file', file)

module.exports = environment

And I've tried literally all 4 options outlined here.

I've tried using the asset pipeline, but that doesn't seem to work anymore.

I've never in all my years been so close to tears for something so incredibly simple. Shouldn't this be simple?? How am I the only one having so much trouble with this?

Answer 1

mb i help you

{
        test: /\.(woff(2)?|eot|otf|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        exclude: path.resolve(__dirname, '../../app/assets'),
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'fonts/',
            useRelativePath: false
          }
        }
      },
      {
        test: /\.(png|jpg(eg)?|gif|ico)$/,
        exclude: path.resolve(__dirname, '../../app/assets'),
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'images/',
            useRelativePath: false
          }
        }
      },