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

问题描述

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

I'm serving up some static files like images and fonts, without any problem. When I try to do the same with a PDF file, I get an Error.

c：\ Reses\repos\Frontend\src\views\default\components\Footer.js
5:17 error导入模块的src / includes / ANVANDARAVTAL_MITTKONTOR中的解析错误。 pdf'import / default

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

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

✖ 1 problem (1 error, 0 warnings)

./src中的错误/views/default/components/Footer.js
找不到模块：错误：无法解析c：\ Resurs \ _repos\Frontend\src\views \ defaultf中的模块'application-loader' \\ components
@ ./src/views/default/components/Footer.js 21：32-84

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 config工作正常，包含jsx，es6，css，静态文件的所有加载器......除了PDF的加载器配置外。

The webpack config works fine, with all the loaders for jsx, es6, css, static files... except for the loader config for PDF.

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

我的其他装载程序配置，有效，看起来几乎相同的PDF和工作......为什么（SOBBING）！？例如：

My other loader config, that works, looks virtually the same for PDFs, AND WORKS... WHY (SOBBING)!? Ex:

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

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

The import of files into react component looks like this:

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

我已经尝试了这么多配置，谷歌搜索错误，谷歌搜索可以解决问题的加载器。没有什么关于从webpack / react提供静态内容，除了通常的图像，css，js。

I've tried so many configurations, googled the error, googled for loaders that could solve the problem. Nothing about serving static content from webpack/react, except the usual images, css, js.

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

I also tried serving a txt file just to see if it works. This also fails with the same error as the PDF.

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

Why does webpack try to parse the files when using the file loader?

推荐答案

我使用webpack file-loader 来处理静态内容在我的构建期间，我能够成功地将PDF传输到我的构建文件夹。以下是我正在做的简化版本：

I am using the webpack file-loader to process static content during my build and I was able to successfully transfer PDFs to my build folder. Here is a simplified version of what i am doing:

反应组件

import pdfFile来自'../../src/file.pdf'


Webpack loader

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

这篇关于使用react webpack文件加载器提供静态pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！