使用react webpack文件加载器为静态pdf提供服务

Question

我提供了一些静态文件，像图像和字体，没有任何问题。当我尝试对PDF文件做同样的操作时，我得到一个错误。

./src/views/default/components/footer.js中出错

C:\resurs\repos\frontend\src\views\default\components\footer.js 5:17错误解析导入模块'src/includes/anvandaravtal_mittkontor.pdf'导入/default中的错误

✖1个问题（1个错误，0个警告）

找不到./src/views/default/components/footer.js模块中的错误：错误：无法解析C:\resurs\repos\frontend\src\views\default\components@./src/views/default/components/footer.js中的模块“application-loader”21:32-84

webpack配置工作良好，所有jsx、es6、css、静态文件的加载器...PDF的加载程序配置除外。

{
    test: /\.pdf(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader?minetype=application/pdf&name=[name].pdf'
}

我的另一个加载器配置，它的工作，看起来几乎相同的PDF，并工作...为什么（呜咽）！？例：

{
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader'
}

将文件导入react组件的过程如下所示：

import bg from "src/design/images/loginBG.jpg"; //works fine
import pdf from "src/includes/ANVANDARAVTAL_MITTKONTOR.pdf"; //NOT WORKING!

我已经尝试了很多配置，谷歌搜索错误，谷歌搜索可以解决问题的加载器。除了常见的图像、css、JS之外，没有关于从WebPack/React提供静态内容的内容。

Answer 1

在生产或开发过程中使用webpack文件加载器模块处理静态内容，并成功使用PDF。以下是该过程的简化版本：

反应组分

在组件文件中，首先导入pdf文件，如：

import PdfFile from '../../src/file.pdf'

<a href={PdfFile} target='_blank' >
    <p>Click to open PDF file in a new tab</p>
</a>

{
  test: /\.(pdf|gif|png|jpe?g|svg)$/,
  use: 'file-loader?name=[path][name].[ext]',
  include: paths
}

{
    test: /\.(png|svg|jpg|gif|pdf)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      }
    ]
  }