关于javascript:使用react webpack文件加载器提供静态pdf

Serving static pdf with react webpack file loader

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

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

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

a?– 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:\
esurs\
epos\\Frontend\\src\\views\\default\\components
@ ./src/views/default/components/Footer.js 21:32-84

webpack配置可以正常工作,并且可以使用jsx,es6,css,静态文件的所有加载器... PDF的加载器配置除外。

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

我的其他加载程序配置正常工作,看起来几乎与PDF相同,并且工作...为什么(抽泣)!?例如:

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

将文件导入React组件如下所示:

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

我已经尝试了许多配置,搜索了错误,搜索了可以解决问题的加载程序。除了通常的图片,css,js之外,没有任何关于从webpack / react提供静态内容的内容。

我还尝试提供txt文件,只是看它是否有效。这也会失败,并显示与PDF相同的错误。

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


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

反应成分

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

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

,然后更改href属性:

1
    <p>Click to open PDF file in a new tab</p>

Webpack加载器

定义webpack规则,例如:

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

1
2
3
4
5
6
7
8
9
10
11
{
    test: /\\.(png|svg|jpg|gif|pdf)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      }
    ]
  }

仅提醒您退出webpack(powershell中的Ctrl C),然后再次将其重新启动以使配置生效。