CODEWITHSUNDEEP
javascriptecmascript-6webpackbabeljs
Ant's
Ant's

Reputation: 13811

webpack is not finding my imports or converting my es6 code

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?

Upvotes: 0

Views: 2831

Answers (2)

Pierre Maoui
Pierre Maoui

Reputation: 6384

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

Upvotes: 1

Debabrata Mohanta
Debabrata Mohanta

Reputation: 645

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.

Upvotes: 3

Related Questions