rmoorman · July 30, 2016 16:54 · Jul 30, 2016
diff --git a/babelrc-vs-webpack-babel-loader-configuration.md b/babelrc-vs-webpack-babel-loader-configuration.md
@@ -0,0 +1,58 @@
+Either you use `.babelrc` to specify environment specific settings
+(plugins or transforms for example) using the `env` key:
+~~~~~json
+{
+  "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.
+~~~~~js
+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"],
+          ],
+        },
+      },
+    ],
+  },
+}
+~~~~~