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""

每次服務器重新加載時，我都會收到此錯誤：* error -./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
    },
}