[Vuejs]-How to use exclude with babel-loader in vue cli3?

1👍

To exclude a file from Babel transpile, you can use the excludes option for the js babel-loader. An example is below.

Caveats:

  1. Strings must be absolute paths (use path.resolve if needed)
  2. Regexp works
  3. 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'
      }
    ]
  }

-3👍

Just remove this:

.use('babel-loader')
.loader('babel-loader')

and it works.

Leave a comment