Webpack 无法加载 pdf 文件：模块解析失败你可能需要一个合适的加载器来处理这种文件类型

Question

我是 webpack 的新手。最近，我想在我的一个项目中找到一种查看 pdf 的方法。我发现了一个名为“react-pdf”(https://www.npmjs.com/package/react-pdf) 的库，并决定用它进行试验。在测试反应项目（npx create-react-app）中使用它时，一切正常，但是当我将它引入到实际项目中时，使用 Nextjs，出现问题。

import placeholder from "../src/placeholder.pdf""

每次服务器重新加载时，我都会收到此错误： * 错误 - ./assets/pdf/placeholder.pdf 模块解析失败：意外标记 (1:0) 您可能需要一个合适的加载器来处理这种文件类型，目前没有配置加载器来处理这种文件。参见 https://webpack.js.org/concepts#loaders （此二进制文件省略了源代码）*

这是 webpack 配置：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.pdf$/i,
                type: 'asset/resource',
                generator: {
                    filename: `[name][ext]`
                }
            }
        ],
    },
    mode: 'development'
};

我做错了什么？

Answer 1

next.config.js

module.exports = {
    webpack: (config, options) =>
    {
        config.module.rules.push({
            test: /\.pdf$/i,
            type: 'asset/source'
        })

        return config
    },
}

Webpack 无法加载 pdf 文件：模块解析失败你可能需要一个合适的加载器来处理这种文件类型

Webpack Cannot load pdf file: Module parse failed You may need an appropriate loader to handle this file type

javascript

pdf

webpack

next.js