Webpack file-loader won't build PDF file

Question

I'm coding with simple 'ol jQuery, sass, and html. I'm trying to create a simple PDF html download link, but I can't figure out how to compile pdf files using file-loader in my webpack config... and I'm wondering if file-loader is even the right dependency for this (I'm using version 1.1.6).

I've tried adding 'pdf' to 'test: /.(gif|png|jpe?g)$/' in my webpack.config.js file so that it reads 'test: /.(gif|png|jpe?g|pdf)$/' - it doesn't work. This was after deleting and reinstalling node_modules and dist. I also manually added the pdf file to my dist file to make sure it wasn't an issue with HTML or something. It did in fact work after that, but I'd like to get this thing to build in my webpack environment on its own.

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

I expected my .pdf file to compile in the dist folder, but it doesn't appear.

My other image files are loading into the correct file path in my dist folder, but not the .pdf file, the .gif file, or (weirdly) a big .png file. I really only care about the .pdf file though. All other images are loading fine; they're all .png and jpeg files.

Webpack file-loader won't build PDF file

0 Answers0