Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.babelrc vs webpack babel-loader configuration

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"],
          ],
        },
      },
    ],
  },
}
@zbjdonald

This comment has been minimized.

Copy link

commented Mar 27, 2017

babelrc: false should be in query?

@NikIvan

This comment has been minimized.

Copy link

commented Apr 18, 2017

@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?

@zv3

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.