javascript - 使用 react webpack 文件加载器提供静态 pdf

Question

我正在提供一些静态文件，如图像和字体，没有任何问题。当我尝试对 PDF 文件执行相同操作时，出现错误。

ERROR in ./src/views/default/components/Footer.js

c:\Resurs\repos\Frontend\src\views\default\components\Footer.js 5:17 error Parse errors in imported module 'src/includes/ANVANDARAVTAL_MITTKONTOR.pdf' import/default

✖ 1 problem (1 error, 0 warnings)

ERROR in ./src/views/default/components/Footer.js Module not found: Error: Cannot resolve module 'application-loader' in c:\Resurs\repos\Frontend\src\views\default\components @ ./src/views/default/components/Footer.js 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!

我尝试了很多配置，用谷歌搜索了错误，用谷歌搜索了可以解决问题的加载程序。与从 webpack/react 提供静态内容无关，除了通常的图像、css、js。

我还尝试提供一个 txt 文件，看看它是否有效。这也失败并出现与 PDF 相同的错误。

为什么 webpack 在使用文件加载器时尝试解析文件？

Answer 1

使用 webpack file-loader module在生产或开发过程中处理静态内容并成功使用 PDF。这是该过程的简化版本:

React 组件

在您的组件文件中首先导入 pdf 文件，如:

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

然后更改 href 属性:

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

Webpack 加载器

像这样定义 webpack 规则:

{
  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]'
        }
      }
    ]
  }