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/defaulta?– 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),然后再次将其重新启动以使配置生效。