CODEWITHSUNDEEP
javascriptwebpackbabeljs
Taste of Leaving
Taste of Leaving

Reputation: 62

webpack babel loader with eslint loader

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 ?

Upvotes: 2

Views: 1724

Answers (1)

Simon Bruneaud
Simon Bruneaud

Reputation: 2557

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'
}]

Upvotes: 1

Related Questions