Yustas Alexu

module: {
        rules: [
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [
                  '@babel/preset-env',
                  '@babel/preset-react' // установить этот пакет в dev-dependencies
                ]
              }
            }
          }
        ]
    },

Вообще лучше использовать .babelrc, пример:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "corejs": 3,
        "modules": false,
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-optional-chaining"
  ]
}

А в вебпаке просто:

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },

transform: translate как самый быстрый вариант. Позволяет двигать, что угодно и куда угодно.
Если время есть, то можно двигать с помощью внутренних паддингов у нужного блока. В любом случае, заказчик мыслит визуально, а не структурно. ему по фигу на ваши флексбоксы.

Начните с просмотра вакансий. После прочтения 10-20 вакансий, где требуется frontend-разработчик станет понятно, где пробелы и куда двигаться.

github.com