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

javascript – 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

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

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]
    ]
}