Question

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

   ./src/views/default/components/Footer.js中的错误

C：\资源号\回购\前端\ SRC \视图\默认\部件\ Footer.js     5:17错误解析导入模块中的错误＆s; src / includes / ANVANDARAVTAL_MITTKONTOR.pdf＆＃39;进口/默认

✖1个问题（1个错误，0个警告）
      ./src/views/default/components/Footer.js中的错误   找不到模块：错误：无法解析模块＆＃39; application-loader＆＃39;在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，工作......为什么（SOBBING）!?例如：

{
    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!

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

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

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

Answer 1

使用webpack file-loader module在制作或开发过程中处理静态内容并成功使用PDF。以下是该过程的简化版本：

反应组件

在组件文件中首先导入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 loader

定义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]'
        }
      }
    ]
  }

Answer 2

这只是提醒您退出Webpack（在Powershell中为Ctrl + C），然后再次将其重新启动，以使配置生效。

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

2 个答案: