How to configure @babel/plugin-proposal-class-properties in webpack.config.js?

Question

I am seeing @babel/plugin-proposal-class-properties as recommended alternative to using babel-preset-stage-0.

In my current react app, I use webpack.config.js instead of babel.rc or any thing else. I am left wondering how do I configure this @babel/plugin-proposal-class-properties plugin in webpack.config.js file. The documentation isn't talking about it and so I'm seeking the help from you.

Thanks in advance!

Answer 1

You can pass options to the babel-loader by using the options property.

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-proposal-class-properties']
        }
      }
    }
  ]
}