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
    },
}