.babelrc vs webpack babel-loader configuration

babelrc-vs-webpack-babel-loader-configuration.md

Either you use .babelrc to specify environment specific settings (plugins or transforms for example) using the env key:

{
  "presets": ["es2015", "stage-0", "react"],
  "env": {
    "development": {
      "plugins": [
        ["transform-object-rest-spread"],
        ["transform-react-display-name"],
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }]
      ]
    },
    "production": {
      "plugins": [
        ["transform-object-rest-spread"],
        ["transform-react-display-name"]
      ]
    }
  }
}

Or add the configuration to your webpack.config.js's babel-loader query and set babelrc to false (to avoid interference/confusion). Note that this will stop tools like webpack-validator from working if you don't want to add a custom schema extension or the like.

var config = {
  // ...
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: "babel",
        include: path.join(__dirname, "frontend"),
        babelrc: false,
        query: {
          presets: ["es2015", "stage-0", "react"],
          plugins: [
            ["transform-object-rest-spread"],
            ["transform-react-display-name"],
          ],
        },
      },
    ],
  },
}

babelrc: false should be in query?

@rmoorman, can you please share a knowledge on what exact priority of configs? "to avoid interference/confusion" - does that mean that priority is not described anywhere?

@NikIvan https://stackoverflow.com/a/48485578/243900