webpack babel loader with eslint laoder

Question

I'm using webpack babel-loader with es-lint like so

  {
    test: /\.(js)$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'eslint-loader'],
  },

however in the babel-loader i see on webpack that i have to pass options like so

options: {
  presets: ['@babel/preset-env']
}

but since i'm using an array of loaders i can't use this option, or since i'm using eslint with babel loader i don't need this @babel/preset env?

Answer 1

You may still want to use @babel/preset even with eslint-loader

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller! ( source )

The eslint-loader will make all code bundled by Webpack syntax checked by eslint (following your eslint config).

You can either keep babel configuration in a separate file .babelrc.json :

{
  presets: [
    '@babel/preset-env'
  ]
}

or use the webpack configuration :

use: [{ 
  loader: 'babel-loader',
  options: { presets: ['@babel/preset-env'] },
}, { 
  loader: 'eslint-loader'
}]