title: How can I compile es5 to es6 using webpack and node (react front-end) on production?
body: <p>I was trying to use the require hook to use Babel to compile files from <code>es5</code> to <code>es6</code>. Unfortunately after running <code>npm install babel-register --save-dev</code> it still cannot find the module.</p>
  
  <pre><code>$ heroku logs
  2017-09-10T00:52:40.511160+00:00 app[web.1]: Error: Cannot find module 'babel-register'
  2017-09-10T00:52:40.511161+00:00 app[web.1]:     at Function.Module._resolveFilename (module.js:469:15)
  2017-09-10T00:52:40.511162+00:00 app[web.1]:     at Function.Module._load (module.js:417:25)
  2017-09-10T00:52:40.511163+00:00 app[web.1]:     at Module.require (module.js:497:17)
  2017-09-10T00:52:40.511163+00:00 app[web.1]:     at require (internal/module.js:20:19)
  2017-09-10T00:52:40.511164+00:00 app[web.1]:     at Object.&lt;anonymous&gt; (/app/src/server.js:2:1)
  2017-09-10T00:52:40.511164+00:00 app[web.1]:     at Module._compile (module.js:570:32)
  2017-09-10T00:52:40.511165+00:00 app[web.1]:     at Object.Module._extensions..js (module.js:579:10)
  2017-09-10T00:52:40.511165+00:00 app[web.1]:     at Module.load (module.js:487:32)
  2017-09-10T00:52:40.511166+00:00 app[web.1]:     at tryModuleLoad (module.js:446:12)
  2017-09-10T00:52:40.511166+00:00 app[web.1]:     at Function.Module._load (module.js:438:3)
  </code></pre>
  
  <p>My server.js file is reserved only for <code>es5</code> then it requires <code>index.js</code> which has all my imported components which are in <code>es6</code>.</p>
  
  <pre><code>// server.js
  
  // only ES5 is allowed in this file
  
  require("babel-register")({
    presets: [ 'es2015' ]
  });
  
  var app = require("./index.js");
  </code></pre>
  
  <p>Am I missing anything in my <code>package.json</code>?</p>
  
  <pre><code>// package.json
  {
    "name": "youtube-instant-search",
    "version": "1.0.0",
    "description": "Renders youtube videos after keystrokes",
    "main": "index.js",      
    "scripts": {
      "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
      "build": "babel src -d build"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "babel-cli": "^6.26.0",
      "babel-core": "^6.26.0",
      "babel-loader": "^6.4.1",
      "babel-preset-env": "^1.6.0",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-es2016": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-2": "^6.24.1",
      "babel-register": "^6.26.0",
      "webpack": "^1.15.0",
      "webpack-dev-server": "^1.14.0"
    },
    "dependencies": {
      "@types/react-addons-create-fragment": "^0.14.17",
      "babel-preset-stage-1": "^6.1.18",
      "lodash": "^3.10.1",
      "prop-types": "^15.5.10",
      "react": "^0.14.3",
      "react-dom": "^0.14.3",
      "react-intl": "^2.3.0",
      "react-redux": "^4.0.0",
      "redux": "^3.0.4",
      "youtube-api-search": "0.0.5"
    }
  }
  </code></pre>
  
  <p>Here is the webpack config file</p>
  
  <pre><code>module.exports = {
    entry: ["./src/index.js"],
    output: {
      path: __dirname,
      publicPath: "/",
      filename: "bundle.js"
    },
    module: {
      loaders: [
        {        
          exclude: /node_modules/,
          test: /\.js$/,
          loader: 'babel-loader',
          query: {
            presets: ['es2015']
          }
        }
      ],
      rules: [{
          test: /\.scss$/,
          use: [{
              loader: "style-loader" // creates style nodes from JS strings
          }, {
              loader: "css-loader" // translates CSS into CommonJS
          }, {
              loader: "sass-loader" // compiles Sass to CSS
          }]
      }]
    },
    resolve: {
      extensions: ["", ".js", ".jsx"]
    },
    devServer: {
      contentBase: "./"
    }
  };
  </code></pre>
  
  <p>What seems to be my problem?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Apparently, <code>babel-register</code> <a href="https://github.com/babel/babel/issues/5851" rel="nofollow noreferrer">is not ready for production</a>. What would be my alternative? How can I compile <code>es5</code> to <code>es6</code> so that it is available for production? Can I do this using only <code>webpack</code> and <code>node</code>?</p>