Webpack - how to ignore test folder

_webpack-ignore-folder.md

Webpack - ignore folders mystery

Following text is related to Quasar CLI but problem comes from the Webpack configuration.

My goal

Change the Webpack and/or Quasar configuration where I could specify the folder which will not be bundled with the application when the quasar build command is used.

Reason?

I'm developing usually applications with dynamically loading content for students and for instructors who are creating the content (its kind of Authorware for editors and result is e-learning content).

When I develop the application I need to have the access to test files which are loaded using an axios (for SPA) or with Electron - file can be selected with dialog window (no auto imports for .json configuration file) or targeted from settings.json which must be possible to change on the fly when in production (can not be imported and bundled).

Content visible for axios must be placed inside statics or newly in public folder. Test folder can contain files such as .html, .pdf, .mp4 etc. So the size can be pretty big.

Example of configuration file:

{
  "myList": {
    "defaultCourseCode": "XXXX",
    "data": [
      {
        "code": "XXXX",
        "name": "XXX-XXX",
        "file": "./XXXX/index.json"
      }
    ]
  }
}

Folder content which is used for testing purposes (real application)

Once I build the application the testing folder is bundled with the application to the dist folder. When using the Electron it is automatically pack into the .asar file which is reach hundreds of MB. But I need to use production data instead of testing one.

Here is the example what should not happen.

And here where the original location of folder is.

Webpack quasar.config.js

Here is the one of many configurations I've tried.

// https://quasar.dev/quasar-cli/handling-webpack
      extendWebpack(cfg) {
        // ignore configuration - should not copy folder donotcopy at all
        cfg.module.rules.push({
          test: /\.(png|jpe?g|gif|svg|html|m4v|json)(\?.*)?$/,
          exclude: path.join(__dirname, "public/donotcopy"),
        });
        // original Quasar configuration
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        })
      }
    }

Solution

Is there a working solution for that?

Today I have to manually delete the folder once published. It is OK for SPA/PWA application but not for Electron where the folder is packed into the .asar file and is not so user friendly to change the content. I tried plenty of configurations for quasar.conf.js file and its webpack section but with no success. I'm not the only one having this issue but haven't found a working solution:

• Custom ignore pattern for public folder copy
• Webpack Exclude a specific file
• How to exclude node_modules but one
• Webpack Exclude folder

build-folder.png

public-folder.png

test-data.png

Allan (EN-GB) Perhaps this will help you: https://github.com/quasarframework/quasar/blob/201b593a6fd309277fc6c7b0d5b3cac003909435/app/lib/webpack/create-chain.js#L317
This is where the public folder is copied (along with the patterns for matching).
Worth noting, with the update to QApp v2.0, copy-webpack-plugin was also updated and it changed the format for ignoring
Notice how it's now in globOptions
So it looks like you'll need to hook onto the chainWebpack in quasar conf, find the plugin named copy-webpack and then alter the patterns to suit your needs.

Thanks to Allan for quasar.config.js solution.
Quasar Issue