Ant's Ant's - 7 months ago 14
Javascript Question

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?

Answer

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.

Comments