how to use exclude with babel-loader in vue cli3? - vue.js

Question

I want to use exclude to ignore some dir to not compile, but in Vue Cli3, it not works. My option is:
chainWebpack: config => {
config.module
.rule('js')
.test(/\.jsx?$/)
.use('babel-loader')
.loader('babel-loader')
.exclude
.add(resolve('src/libs/iview')) // this line not work
.end();
}
Error:
TypeError: Cannot read property 'add' of undefined

Answer 1

To exclude a file from Babel transpile, you can use the excludes option for the js babel-loader. An example is below.
Caveats:
Strings must be absolute paths (use path.resolve if needed)
Regexp works
Functions work
// const path = require('path') // somewhere at the top of the file...
chainWebpack: config => {
config.module
.rule('js')
.exclude
.add(/path\/to\/folder\/.+\.ignore/) // Regexp: ignore anything inside of path/to/folder that has .ignore in the file extension
// .add(path.resolve('./path/to/the/folder')) // example with a nix folder
// .add('C:\\path\\to\\the\\folder\\') // absolute path, example with a Windows folder
.end()
}
The command vue inspect module.rules will return:
[...]
/* config.module.rule('js') */
{
test: /\.m?jsx?$/,
exclude: [
function () { /* omitted long function */ },
'C:\\path\\to\\the\\folder\\'
],
use: [
/* config.module.rule('js').use('cache-loader') */
{
loader: 'cache-loader',
options: {
cacheDirectory: '[...]\\node_modules\\.cache\\babel-loader',
cacheIdentifier: '2e75750d'
}
},
/* config.module.rule('js').use('babel-loader') */
{
loader: 'babel-loader'
}
]
}

Answer 2

Just remove this:
.use('babel-loader')
.loader('babel-loader')
and it works.