Unexpected error when trying to run Webpack

Question

This question is related to that other question, I am trying to package my react app (html and javascript) and deploy it on another machine on IIS.

---

When I run npm run build:prod, I get an error: index.js Line 1: Unexpected reserved word. You may need an appropriate loader to handle this file type.

---

Here is my scripts section in the package.json:

  "scripts": {
    "start": "node server.js",
    "build:prod": "webpack --optimize-minimize --config webpack.prod.config.js",
    "lint": "eslint src"
  },

The webpack.prod.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist_prod'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })
  ],
  externales: { "jquery": "jQuery", "$": 'jQuery' },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192' } // inline base64 URLs for <=8k images, direct URLs for the rest
    ]
  }
};

and the perfectly fine index.js file since the error mentions it:

import React from 'react';
import App from './App';

var myApp = React.render(
    <App />,
    document.getElementById('root')
  );

Answer 1

Indeed I was missing one loader :

loaders: [
  {
    test: /\.jsx?$/,
    loaders: ['babel'],
    include: path.join(__dirname, 'src')
  },
  { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
  { test: /\.css$/, loader: 'style-loader!css-loader' },
  { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192' } // inline base64 URLs for <=8k images, direct URLs for the rest
]

Thanks @Alexander O'Mara