"You may need an appropriate loader to handle this file type" with Webpack and Babel

You need to install the es2015 preset:

npm install babel-preset-es2015

and then configure babel-loader:

{    test: /\.jsx?$/,    loader: 'babel-loader',    exclude: /node_modules/,    query: {        presets: ['es2015']    }}

Make sure you have the es2015 babel preset installed.

An example package.json devDependencies is:

"devDependencies": {  "babel-core": "^6.0.20",  "babel-loader": "^6.0.1",  "babel-preset-es2015": "^6.0.15",  "babel-preset-react": "^6.0.15",  "babel-preset-stage-0": "^6.0.15",  "webpack": "^1.9.6",  "webpack-dev-middleware": "^1.2.0",  "webpack-hot-middleware": "^2.0.0"},

Now configure babel-loader in your webpack config:

{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }

add a .babelrc file to the root of your project where the node modules are:

{  "presets": ["es2015", "stage-0", "react"]}

More info:

• babeljs.io - using babel with webpack

• babeljs.io - docs on .babelrc

• react-webpack-cookbook - configure react with webpack

• a react-webpack-example repo

If you are using Webpack > 3 then you only need to install babel-preset-env, since this preset accounts for es2015, es2016 and es2017.

var path = require('path');let webpack = require("webpack");module.exports = {    entry: {        app: './app/App.js',        vendor: ["react","react-dom"]    },    output: {        filename: 'bundle.js',        path: path.resolve(__dirname, '../public')    },    module: {        rules: [{            test: /\.jsx?$/,            exclude: /node_modules/,            use: {                loader: 'babel-loader?cacheDirectory=true',            }        }]    }};

This picks up its configuration from my .babelrc file:

{    "presets": [        [            "env",            {                "targets": {                    "browsers":["last 2 versions"],                    "node":"current"                }            }        ],["react"]    ]}