Excluding single files

[ivansieder]

The Vue CLI offers the possibility to use the public/ directory, which will copy it's files 1:1 to the dist/ folder when it's being built. That's what copy-webpack-plugin is being used for.

Now additionally, some of the .html-files from public/ are being are being used just as templates for html-webpack-plugin to auto-inject scripts. That means, that these files don't need to be copied to the final dist/ folder. The issue which arises now is, that using the "ignore" property for this won't work all too well, as using "index.html" for example would mean that it's using "index.html" as a glob and therefor excluding all index.html files.

Is there any way to exclude single files with relative paths (i.e. "public/index.html", "public/other/index.html" etc. or what would be the correct approach to handle these cases?)

[ivansieder]

Currently, this is what's being used:

webpackConfig
  .plugin('copy')
    .use(require('copy-webpack-plugin'), [[{
      from: publicDir,
      to: outputDir,
      toType: 'dir',
      ignore: publicCopyIgnore
    }]])

where publicDir is the absolute path to the "public" and outputDir the absolute path to "dist". publicCopyIgnore might look something like this: [ '.DS_Store', 'public/index.html' ]

[alexander-akait]

@ivansieder interesting, can you provide minimum reproducible repo with example what you actually have and expected. Why ignore with index.html is not suitable for you?

[ivansieder]

@evilebottnawi repo could be used this one: https://github.com/ivansieder/vue-cli-nested-index-files-bug. Right now, vue cli is passing ["index.html", ".DS_Store"] to the copy-webpack-plugin, which means, that the glob is being matched with index.html, which in turn means, that public/index.html, public/other/index.html, public/some/extremely/nested/one/index.html all would be ignored. That's why ignore in this case won't work really rell in my opinion (maybe there's a way around that which I don't know yet).

The repo above should be installed and inside node_modules, there's the @vue/cli-service/lib/config/app.js file and at the really bottom, there's the copy-webpack-plugin being configured. Does that help or do you need some additional information?

[alexander-akait]

@ivansieder what about implement ignore as function?

[ivansieder]

@evilebottnawi what could such a function possibly look like?

[alexander-akait]

@ivansieder depends what information you need to detect should you ignore or not

[ivansieder]

@evilebottnawi just talking about vue cli (but I think this could be useful in other cases, too), a function which gets called with the current file should be more than enough. that way, inside the function, you could check if that path matches one you have in an array or somewhere else and return true or false? I would however decouple it from the "normal" ignore, as it could happen (that's also the case for vue cli) that you need something being ignored by globs and single files.

webpackConfig
    .plugin('copy')
        .use(require('copy-webpack-plugin'), [[{
            from: publicDir,
            to: outputDir,
            ignore: publicCopyIgnore,
            ignoreFunction(file) {
                return publicCopyIgnoreFiles.includes(file.relativeFrom)
            }
      }]])

[alexander-akait]

@ivansieder why not pass file.relativeFrom directly?

[ivansieder]

someone might be interested in the absolute path, too. This also keeps it open for eventual future additions. And if you really want just the relativeFrom, you could still do something like this:

ignoreFunction({ relativeFrom }) {
    return publicCopyIgnoreFiles.includes(relativeFrom)
}

[ivansieder]

alternative would be of course to let the user only pass an array with strings and then do everything internally (checking, if it's relative path or not), but I guess that would incur too many edge cases that would have to be covered. And having a function like this leaves the flexibility up to the user, which implements it.

[alexander-akait]

@ivansieder Yes, PR welcome 👍

[sodatea]

Just came up with a fix: vuejs/vue-cli#4613
The old behavior is due to default matchBase: true config passed to minimatch.
As I read the source code of this plugin today, I figured out that we can pass objects into the ignore array, so it's easily fixed with a config like

ignore: [{
  glob: 'index.html',
  matchBase: false
}]

[ivansieder]

Awesome, thanks @sodatea