webpack is not finding my imports or converting my

Question

I'm new to webpack and trying to set up for my client side project. I have created a repo over here, which has my entire source code.

My webpack config looks like this:

var path = require('path');
module.exports = {
    entry: './public/js/main.js',
    output: {
        path: __dirname,
        filename: './public/dist/bundle.js'
    },
    module: {
        loaders: [{ 
            test: /\.js$/,
            loader: "babel-loader",
            include: [
                path.resolve(__dirname, "./public/js"),
            ],
            exclude: [
              path.resolve(__dirname, "node_modules"),
            ]
        }],
        resolve: {
          extensions: ['', '.js', '.jsx']
        }
    }
};

When I run:

webpack

its bundling my js and putting it to dist folder. However, I can see the bundled file is not having Point.js or loadash that can be found on my main.js imports. And also looks like the resulted bundle code is not converted to es6 but rather just having the entire content of my main.js file.

Where I'm making mistake?

Answer 1

To complete XtremeCoder's answer, here what I needed to add to webpack.config.js to make it works :

module: {
    loaders: [{ 
        test: /\.js$/,
        loader: "babel-loader",
        include: [
            path.resolve(__dirname, "./public/js"),
        ],
        exclude: [
          path.resolve(__dirname, "node_modules"),
        ],
        query: {
          presets: ['es2015']
        }
    }],
    resolve: {
      extensions: ['', '.js', '.jsx']
    }
}

Answer 2

Made following changes in your package json:

"devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "webpack": "^1.13.0"
}

and in webpack.config.js :

var path = require('path');
module.exports = {
entry: './public/js/main.js',
output: {
    path: __dirname,
    filename: './public/dist/bundle.js'
},
module: {
    loaders: [{
        test: /\.js$/,
        loaders: ['babel?presets[]=es2015'],
        include: [
            path.resolve(__dirname, "./public/js"),
        ],
        exclude: [
            path.resolve(__dirname, "node_modules"),
        ]
    }],
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
}
};

Run npm install and the webpack. It should work fine.