webpack.config.js

/**
 * @see http://webpack.github.io/docs/configuration.html
 * for webpack configuration options
 */
module.exports = {
  // 'context' sets the directory where webpack looks for module files you list in
  // your 'require' statements
  context: __dirname + '/webpack',

  // 'entry' specifies the entry point, where webpack starts reading all
  entry: {
    index: './index.js',
    graphiql: './graphiql.js'
  },

  // 'output' specifies the filepath for saving the bundled output generated by
  // wepback.
  // It is an object with options, and you can interpolate the name of the entry
  // file using '[name]' in the filename.
  // You will want to add the bundled filename to your '.gitignore'.
  output: {
    filename: '[name].bundle.js',
    // We want to save the bundle in the same directory as the other JS.
    path: __dirname + '/app/assets/javascripts'
  },

  externals: {
    // If you load jQuery through a CDN this will still work
    // jQuery is now available via "require('jquery')"
    jquery: 'var jQuery'
  },

  // Turns on source maps
  // Prefix with a '#' to squash the FF warnings that say:
  // 'Using //@ to indicate sourceMappingURL pragmas is deprecated.
  // Use //# instead'
  devtool: '#eval-source-map',

  // The 'module' and 'loaders' options tell webpack to use loaders.
  // @see http://webpack.github.io/docs/using-loaders.html
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel', // 'babel-loader' is also a legal name to reference
        query: {
          presets: [
            'react',
            'es2015',
            {
              "plugins": [
                __dirname + "/webpack/babelRelayPlugin.js"
              ]
            }]
        }
      },
      {test: /\.css$/, loader: "style-loader!css-loader"},
      {test: /\.png$/, loader: "url-loader?limit=100000"},
      {test: /\.jpg$/, loader: "file-loader"}
    ]
  }
};