title: Exporting ES6 and React as a AMD module with webpack or babel-cli
body: <p>EDIT 2: Solved it, with a slight modification to the accepted answer, now my <code>webpack.config.js</code> looks like so:</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  
  module.exports = {
      entry: {
          adminpanel: path.join(__dirname, 'theme/peakbalance/es6/adminpanel.js')
      },
      output: {
          path: path.join(__dirname, 'theme/peakbalance/amd/src'),
          filename: '[name]_bundle.js',
          libraryTarget: 'amd'
      },
      module: {
          loaders: [{
              test:/\.(js|jsx)$/,
              loader:'babel',
              query: {
                  presets: ["es2015", "stage-0", "react"]
              }
          }]
      }
  };
  </code></pre>
  
  <p>So i have been struggling with this issue for quite some time now. I am coding in a old php system called moodle, which are tightly coupled with the AMD system, i would like to use new JS technologies instead of jquery 1.12 like react, immutable, redux etc. though, so i am trying to make the last part of the build chain export an AMD module. What i have right now:</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  
  module.exports = {
  entry: {
      adminpanel: path.join(__dirname, 'theme/peakbalance/amd/es6/adminpanel.js')
  },
  output: {
      path: path.join(__dirname, 'theme/peakbalance/amd/src'),
      filename: '[name]_bundle.js'
  },
  module: {
      loaders: [{
          test:/\.(js|jsx)$/,
          loader:'babel',
          query: {
              presets: ['es2015', 'stage-0', 'react'],
              plugins: ['transform-es2015-modules-amd']
          },
          include:path.join(__dirname,'./theme/peakbalance/amd/es6')
      }, {
          test:/\.json$/,
          loaders:['json-loader'],
          include:path.join(__dirname,'./theme/peakbalance/amd/es6')
      }, {
          test:/\.(png|jpg)$/,
          loader:'url?limit=25000'
      }, {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          loader: "file"
      }, {
          test: /\.(woff|woff2)/,
          loader:"url?prefix=font/&amp;limit=5000"
      }, {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url?limit=10000&amp;mimetype=application/octet-stream"
      }, {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url?limit=10000&amp;mimetype=image/svg+xml"
      }]
    }
  };
  </code></pre>
  
  <p>So as you can see, i am trying to use a transform-es2015-modules-amd plugin for the loader, this plugin works perfect if i use it together with the babel-cli like this:</p>
  
  <pre><code>babel --plugins transform-es2015-modules-amd ./theme/peakbalance/es6/adminpanel.js
  </code></pre>
  
  <p>then it outputs:</p>
  
  <pre><code>define(["exports"], function (exports) {
          "use strict";
  
          Object.defineProperty(exports, "__esModule", {
              value: true
          });
  
          function _classCallCheck(instance, Constructor) {
              if (!(instance instanceof Constructor)) {
                  throw new TypeError("Cannot call a class as a function");
              }
          }
  
          var _createClass = function () {
              function defineProperties(target, props) {
                  for (var i = 0; i &lt; props.length; i++) {
                      var descriptor = props[i];
                      descriptor.enumerable = descriptor.enumerable || false;
                      descriptor.configurable = true;
                      if ("value" in descriptor) descriptor.writable = true;
                      Object.defineProperty(target, descriptor.key, descriptor);
                  }
              }
  
              return function (Constructor, protoProps, staticProps) {
                  if (protoProps) defineProperties(Constructor.prototype, protoProps);
                  if (staticProps) defineProperties(Constructor, staticProps);
                  return Constructor;
              };
          }();
  
          var AdminPanel = function () {
              function AdminPanel() {
                  _classCallCheck(this, AdminPanel);
  
                  this.init = this.init.bind(this);
              }
  
              _createClass(AdminPanel, [{
                  key: "init",
                  value: function init(herpderp) {
                      console.log("herpderp42424");
                      console.log("herp");
                      var app = new App();
                  }
              }]);
  
              return AdminPanel;
          }();
  
          exports.default = AdminPanel;
      });
  });
  </code></pre>
  
  <p>When its being run through webpack with just:</p>
  
  <pre><code>webpack -w
  </code></pre>
  
  <p>it outputs:</p>
  
  <pre><code>/******/ (function(modules) { // webpackBootstrap
  /******/    // The module cache
  /******/    var installedModules = {};
  
  /******/    // The require function
  /******/    function __webpack_require__(moduleId) {
  
  /******/        // Check if module is in cache
  /******/        if(installedModules[moduleId])
  /******/            return installedModules[moduleId].exports;
  
  /******/        // Create a new module (and put it into the cache)
  /******/        var module = installedModules[moduleId] = {
  /******/            exports: {},
  /******/            id: moduleId,
  /******/            loaded: false
  /******/        };
  
  /******/        // Execute the module function
  /******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  
  /******/        // Flag the module as loaded
  /******/        module.loaded = true;
  
  /******/        // Return the exports of the module
  /******/        return module.exports;
  /******/    }
  
  
  /******/    // expose the modules object (__webpack_modules__)
  /******/    __webpack_require__.m = modules;
  
  /******/    // expose the module cache
  /******/    __webpack_require__.c = installedModules;
  
  /******/    // __webpack_public_path__
  /******/    __webpack_require__.p = "";
  
  /******/    // Load entry module and return exports
  /******/    return __webpack_require__(0);
  /******/ })
  /************************************************************************/
  /******/ ([
  /* 0 */
  /***/ function(module, exports) {
  
      export default class AdminPanel {
              constructor() {
                  this.init = this.init.bind(this);
              }
              init(herpderp) {
                  console.log("herpderp42424");
                  console.log("herp");
                  console.log("alright alright");
                  let app = new App();
              }
          }
  /***/ }
  /******/ ]);
  </code></pre>
  
  <p>So now it doesn't even transpile it from es6 to es5 and its absolutely not a AMD module structure. </p>
  
  <p>I basically just want the exact same behavior as the babel cli, but with webpack doing its magic, since i'll probably go beyond 1 file, so i need the files to be concatted, i looked at something like the babel-plugin-inline-import plugin, that i would be able to use with the babel-cli for multiple files, but i really think that webpack is more smooth. Have anyone fixed this issue?? </p>
  
  <p>EDIT 1: I have changed my webpack configuration to something simplified like so:</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  
  module.exports = {
    entry: {
       adminpanel: path.join(__dirname, 'theme/peakbalance/es6/adminpanel.js')
    },
    output: {
        path: path.join(__dirname, 'theme/peakbalance/amd/src'),
        filename: '[name]_bundle.js',
        library: 'amd'
    },
    module: {
        loaders: [{
            test:/\.(js|jsx)$/,
            loader:'babel',
            query: {
                presets: ["es2015", "stage-0", "react"]
            }
        }]
      }
   };
  </code></pre>
  
  <p>And now atleast webpack is transpileing it to the following: </p>
  
  <pre><code>var amd =
  /******/ (function(modules) { // webpackBootstrap
  /******/    // The module cache
  /******/    var installedModules = {};
  
  /******/    // The require function
  /******/    function __webpack_require__(moduleId) {
  
  /******/        // Check if module is in cache
  /******/        if(installedModules[moduleId])
  /******/            return installedModules[moduleId].exports;
  
  /******/        // Create a new module (and put it into the cache)
  /******/        var module = installedModules[moduleId] = {
  /******/            exports: {},
  /******/            id: moduleId,
  /******/            loaded: false
  /******/        };
  
  /******/        // Execute the module function
  /******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  
  /******/        // Flag the module as loaded
  /******/        module.loaded = true;
  
  /******/        // Return the exports of the module
  /******/        return module.exports;
  /******/    }
  
  
  /******/    // expose the modules object (__webpack_modules__)
  /******/    __webpack_require__.m = modules;
  
  /******/    // expose the module cache
  /******/    __webpack_require__.c = installedModules;
  
  /******/    // __webpack_public_path__
  /******/    __webpack_require__.p = "";
  
  /******/    // Load entry module and return exports
  /******/    return __webpack_require__(0);
  /******/ })
  /************************************************************************/
  /******/ ([
  /* 0 */
  /***/ function(module, exports) {
  
      "use strict";
  
      Object.defineProperty(exports, "__esModule", {
          value: true
      });
  
      var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  
      function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  
      var AdminPanel = function () {
          function AdminPanel() {
              _classCallCheck(this, AdminPanel);
  
              this.init = this.init.bind(this);
          }
  
          _createClass(AdminPanel, [{
              key: "init",
              value: function init(herpderp) {
                  console.log("herpderp42424");
                  console.log("herp");
                  console.log("alright alright");
                  var app = new App();
              }
          }]);
  
          return AdminPanel;
      }();
  
      exports.default = AdminPanel;
  
  /***/ }
  /******/ ]);
  </code></pre>
  
  <p>But setting a variable called amd  equal to what im exporting, is hardly a substitute for a Define call according to the AMD standard. </p>