How do i exclude a directory with mocking files from webpack build with vue.config.js?

Question

I have a directory called mock at root which contains mocking data that I use to run the app in development mode. I would like to exclude them when i build for production. I notice that it is being added into bundle whenever i run vue-cli-service build and it is bloating my app bundle size. I am using vue-cli and so I have to work with vue.config.js.

It is not clear from the docs or any answers on the wider web how I can specify which folders/files to exclude from the build.

Here is a snippet of my vue.config.js.

module.exports = {
  chainWebpack: (config) => {
    config.resolve.symlinks(false)
  },
  configureWebpack: {
    plugins: [
      new CompressionPlugin()
    ]
  },
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/styles/main.scss";`
      }
    }
  }
}

Answer 1

This is not the perfect solution, but...

If you want to exclude that directory at build time, you can try to use require instead of import. Something like this (source):

if (process.env.VUE_APP_MY_CONDITION) {
  require('./conditional-file.js');
}

But be aware of this!