Webpack 文件加载器不会构建 PDF 文件

Sla*_*rJS 5 html pdf download webpack-file-loader

我正在使用简单的 jQuery、sass 和 html 进行编码。我正在尝试创建一个简单的 PDF html 下载链接,但我不知道如何在 webpack 配置中使用 file-loader 编译 pdf 文件...而且我想知道 file-loader 是否是正确的依赖项为此(我使用的是版本 1.1.6)。

我尝试将“pdf”添加到 webpack.config.js 文件中的“test: /.(gif|png|jpe?g)$/”,以便它读取“test: /.(gif|png|jpe? g|pdf)$/' - 它不起作用。这是在删除并重新安装 node_modules 和 dist 之后。我还手动将 pdf 文件添加到我的 dist 文件中,以确保它不是 HTML 或其他问题。事实上,在那之后它确实起作用了,但我想让这个东西在我的 webpack 环境中单独构建。

//webpack.config.js file, using file-loader 1.1.6

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },

  devtool: 'eval-source-map',
  devServer: {
    contentBase: './dist'
  },

  module: {
   rules: [
     {
       test: /\.(gif|png|jpe?g|pdf)$/,
       use: [
         {
           loader: 'file-loader',
           options: {
             name: '[name].[ext]',
             outputPath: 'assets/images/'
            }
         }
       ]
     }
   ]
  }
};

// HTML download link

<a href="./assets/images/filename.pdf" download>
  <div class="this class">
     <p>Linktext</p>
  </div>
</a>
Run Code Online (Sandbox Code Playgroud)

我期望我的 .pdf 文件在 dist 文件夹中编译,但它没有出现。

我的其他图像文件正在加载到 dist 文件夹中的正确文件路径中,但不是 .pdf 文件、.gif 文件或(奇怪的)大 .png 文件。不过,我真的只关心 .pdf 文件。所有其他图像加载正常;它们都是 .png 和 jpeg 文件。