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?

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/36964724/webpack-is-not-finding-my-imports-or-converting-my-es6-code