'Getting Started' webpack.config.js code is invalid

[MrGhostlyOrb]

Bug report

When attempting to follow the guide the webpack.config.js file has an error when typing/pasting the 'full' version of the code for the babel-loader

Steps to reproduce

When trying to follow the below step there is an issue with the 'query' section for the babel-loader and I believe it needs to be changed to 'options' as far as I can see as that's what worked for me.

const autoprefixer = require('autoprefixer');

module.exports = {
  entry: ['./app.scss', './app.js'],
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle.css',
            },
          },
          {loader: 'extract-loader'},
          {loader: 'css-loader'},
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  autoprefixer()
                ]
              }
            } 
          },
          {
            loader: 'sass-loader',
            options: {
              // Prefer Dart Sass
              implementation: require('sass'),

              // See https://github.com/webpack-contrib/sass-loader/issues/804
              webpackImporter: false,
              sassOptions: {
                includePaths: ['./node_modules'],
              },
            },
          }
        ],
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['@babel/preset-env'],
        },
      }
    ],
  },
};

Actual behaviour

The current behaviour produces an error as stated below:

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[1] has an unknown property 'query'. These properties are valid:
   object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
   -> A rule description with conditions and effects for modules.

Expected behavior

When the property 'query' is changed to 'options' the program compiles successfully

Your Environment:

Software	Version(s)
MDC Web	11.0.0
Browser	Chrome 90.0.4430.72
Operating System	Manjaro Linux

Possible solution

Changing 'query' to 'options'

[pogorv12]

Guys, thank you for the job you do! But could you please update docs and tutorials on material.io to match actual configuration or just make a note that more ore less actual data is on github

It is total mess with scss mixins. style classes and it's names. It took me a lot of time to reproduce header+drawer setup just because of discrepencies with mixins and class names between guidelines in material.io website and actual code... fortunately I find more or less correct info in readme.md files ... but i was almost ready to break up with it trying to follow guides on material.io.