Vue.js exclude folders from webpack bundle

Question

I'm stuck on a problem very simple about webpack. I have a simple Vue.js application created using the vue-cli.

I created the folder public/Reports that I want to exclude from bundle (the folder contains subfolders and PDFs).

My project structure is standard:

├── dist/
│   └── (I don't want "Reports" folder here)
├── public/
│   ├── index.html
|   ├── Reports (folder that I need during development, it contains subfolders and PDfs)
│   │   └── subfolder1
│   │       └── file1.pdf
│   └── ...
├── src/
│   └── ...
├── .babel.config.js
├── .eslintrc.js
├── package.json
├── prettier.config.js
├── vue.config.js
└── README.md

I've tried to exclude the Reports folder in vue.config.js but it does not work:

const path = require("path");
const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.pdf$/,
                    exclude: [
                        path.resolve(__dirname, "public/Reports"),
                    ],
                },
            ],
        },
    },
};

How can I exclude this fodler (and subfolders) from being include in bundle?

Answer 1

You need to tap into the copy plugin.

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.plugin("copy").tap(([options]) => {
      options[0].ignore.push("Reports/**");
      return [options];
    });
  },
};