使用 webpacker 加载字体和图像

Question

我正在尝试使用 Webpacker 将资产 (fonts/images) 简单地加载到 Rails 项目中。它被证明比它应该的更难。

我在 Rails 11.0.4、Rails 5.1.6 和 Webpacker 3.5.3 上使用 React。

我已尝试创建自定义加载程序文件以附加到 webpack 配置，如参考文献 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

而且我几乎已经尝试了列出的所有 4 个选项 here。

我尝试过使用资产管道，但它似乎不再起作用了。

多年来，我从来没有因为如此简单的事情而如此接近眼泪。这不应该很简单吗？？为什么只有我一个人遇到这么多麻烦？

Answer 1

mb我帮你

{
        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
          }
        }
      },

使用 webpacker 加载字体和图像

Loading fonts and images with webpacker

javascript

ruby-on-rails

webpack

react-on-rails

webpacker