Re-use babel.config.js in babel-loader in an explicit way

[thernstig]

I'm submitting a feature request

Webpack Version:
4.46.0

Babel Core Version:
"@babel/core": "7.13.15"

Babel Loader Version:
8.2.2

Please tell us about your environment:
Linux

Current behavior:
I have these files:
client/webpack.config.dev.js
babel.config.js

The webpack config contains the babel-loader specific options and presets to build my app. But I need to duplicate these into a babel.config.js because both ESLint via @babel/eslint-parser as well as Jest via the transforms config need the same babel configuration to run. This means three different applications using the babel config.

• Webpack
• ESLint
• Jest

Expected/desired behavior:
I would want to specify in my babel-loader config to instead use the babel.config.js to configure how it behaves. I would want to specify a file path to babel.config.js in the babel-loader config.

What is the motivation / use case for changing the behavior?
It lets developers focus on configuring babel in one location, instead of multiple. This saves time as well as potential bugs where developers forget to update two locations.

Additional context
If the webpack.config.dev.js and babel.config.js files exist in the same directory there already seems to be a merge of configs where the babel.config.js takes precedence. See #823 for discussion around this.
Maybe a simple solution would be to specify a "search": "upwards" or something for babel-loader to find the babel.config.js to still keep the merging?

[nicolo-ribaudo]

You can either specify rootMode: "upward" or configFile: "/path/to/babel.config.js".

[thernstig]

I did not find these specified anywhere in the README. Should they be in the options object for the babel-loader config?

So let's say I have this config in webpack.config.dev.js for babel-loader:

        options: {
          plugins: [
            ['@babel/plugin-proposal-class-properties'],,
            ['@babel/plugin-proposal-object-rest-spread'],
          ],
          presets: [
            ['@babel/preset-env', { targets: "defaults" }]
          ]
        },

And this in babel.config.js:

module.exports = {
  plugins: [
    ['./client/node_modules/babel-plugin-transform-amd-to-commonjs'],
    ['./client/node_modules/@babel/plugin-proposal-class-properties'],
    ['./client/node_modules/@babel/plugin-transform-spread'],
  ],
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

then the final config for babel-loader would be this?

        options: {
          plugins: [
            ['./client/node_modules/babel-plugin-transform-amd-to-commonjs'],
            ['@babel/plugin-proposal-class-properties'],,
            ['@babel/plugin-proposal-object-rest-spread'],
          ],
          presets: [
            ['@babel/preset-env', { targets: "defaults" }]
          ]
        },

I suppose I should actually test this to see what I get. I assume that would break because the path will be incorrect in the merged example. Maybe I am just attacking this wrong, but it should be quite common to have a webpack config in a ROOT/client/ directory and then a babel.config.js` in the root to apply for ESLint/Jest in the ROOT of the project.

[nicolo-ribaudo]

I did not find these specified anywhere in the README

The first line in the "Options" section of the README is "See the babel options", which links exactly to where these options are documented 😅

If I understood your goals correctly, you can remove the plugins section in the babel-loader config since they are already included in babel.config.js. But otherwise yes, the preset-env options defined in the babel-loader options take precedence over what's defined in babel.config.js.

[thernstig]

Thanks!