使用 webpacker 加载字体和图像

Posted 2023-02-15

【中文标题】使用 webpacker 加载字体和图像

【英文标题】：Loading fonts and images with webpacker

【发布时间】：2018-11-02 10:49:38

【问题描述】：

我正在尝试使用 Webpacker 将资产（字体/图像）简单地加载到 Rails 项目中。事实证明，这比应有的难度要高得多。

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

我尝试创建自定义加载程序文件以附加到 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

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

我尝试过使用资产管道，但这似乎不再有效。

多年来，我从未为如此简单的事情如此接近泪水。这不应该很简单吗？怎么就只有我一个人有这么大的麻烦？

【参考方案1】：

我帮你

        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
          
        
      ,

【讨论】：

谢谢你。我欣喜若狂。