Webpack babel-loader need babel.config.js or not?

Question

I have a webpack setting like below

test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
  loader: 'babel-loader?cacheDirectory',
  options: {
    presets: [
      '@babel/preset-env',
      '@babel/react', // Error: Plugin/Preset files are not allowed to export objects, only functions.
    ],
    plugins: [
      [
        '@babel/plugin-proposal-decorators',
        {
          legacy: true,
        },
      ],
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true,
        },
      ],
    ],
  },
},

So do i still need add a file babel.config.js or .babelrc to double the config again?

if i use vscode, do i need this file babel.config.js for some plugin?

Answer 1

No that is redundant. I see you are using the example in babel-loader docs. I'd recommend to use the example in official babel docs (click on webpack). That keeps your webpack config simple and allows over easy overrides of babel in folders by placing a .babelrc in directories where'd you like different settings.

.babelrc

{
    "presets": [
        "@babel/preset-env"            
        "@babel/preset-react",
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        {
            "loose: true
        }
    ]
}

Your webpack config file

module: {
    loaders: [
        {
            test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"
        }
    ]
}

Considering that error: make sure you've at least installed @babel/preset-react and @babel/preset-env, @babel/core and @babel/plugin-proposal-class-properties! You might be using babel 6 plugins. Could you share your package.json?