Webpack pdf 文件加载器答案

【问题标题】：Webpack pdf file loaderWebpack pdf 文件加载器
【发布时间】：2020-08-01 08:20:53
【问题描述】：

这是错误：

“构建失败！

× 错误 ./media/fonts/handFont3.otf 1:4.

模块解析失败：意外令牌 (1:0) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件。请参阅https://webpack.js.org/concepts#loaders （此二进制文件省略了源代码） @ ./index.js 3:0-37 @ ../node_modules/preact-cli/lib/lib/entry.js @multi ../node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server"

我正在尝试将 pdf 导入到 preact 组件中以使其构建，以便我可以获取到带有 pdf 文件的页面的链接。方法如下：

import pdfFile from '../../media/images/pdfFile.pdf'

<a href={pdfFile} target="_blank"...

它不起作用，所以我用谷歌搜索了这两个解决方案以添加到 wepback.config.js 中：

module.exports = {
module: {
    rules: [
        {
            test: /\.(png|svg|jpg|gif|pdf)$/,
            use: ['file-loader']
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: ['file-loader']
        },
    ]
},

};

和

{
  test: /\.(pdf)$/,
  use: ['url-loader']
},

我确实通过这个字符串手动使 webpack.config 工作：

--config webpack.config.js

文件正在运行，但结果相同。我仍然收到错误消息。 otf 字体也是如此。

谢谢。

【问题讨论】：

你想达到什么目的？
你能发布完整的错误信息吗？

标签： reactjs pdf webpack import preact

【解决方案1】：

我想出了解决办法。你不能同时使用 webpack 配置和 preact 配置。

所以我删除了 webpack 配置并将 preact 更改为：

export default (config, env, helpers, options) => {
    const rule = {
        test: /\.(otf|pdf)$/,
        loader: 'file-loader'
    }
    config.module.rules.push(rule);
}

【讨论】：