Webpack Babel-loader transpiles code with eval()

Question

I'm having an issue with Webpack and Babel. I'm trying transpile my JavaScript code into a bundle file. Here's the file structure and the snippets:

file structure:

- src
| file.js
package.json
webpack.config.js

package.json:

{
  "name": "babel-webpack-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  }
}

webpack.config.js:

const path = require('path');

module.exports = {
    entry: {
        app: './src/file.js'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['env']
                        }
                    }
                ]
            }
        ]
    }
}

When I enter webpack --mode development, it creates the file app.bundle.js successfully inside the directory build.

However, it doesn't seem to be working properly, because at the end of build/app.bundle.js where I'm looking for the code from src/file.js I have the following :

/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
eval("\n\nvar fun = function fun() {\n  return console.log('Hello World');\n};\n\n//# sourceURL=webpack:///./src/file.js?");

/***/ })

Which is strange, am I not supposed to simply have this instead?

/***/ (function(module, exports, __webpack_require__) {

"use strict";
let fun = () => console.log('Hello World')

/***/ })

Is there a problem with the config?

Answer 1

This is actually not because of babel, but because of webpack. It requires an option called devtool that decides whether it should eval the code or use some sort of source-map.

You might be looking for the following:

// webpack.config.js (excerpt)
module.exports = {
    // ...
    devtool: 'inline-source-map'
    // ...
};

The inline-source-map omits eval in favor of a - well - inlined sourcemap inside the bundle. Do not use it for production, though ;-)

There are several options for devtool that all have their advantages and disadvantages. For more information on the topic, please refer to the official webpack documentation.

Answer 2

After countless hours of research, I finally found the solution, the preset that needs to be used is babel-preset-env and not env.

const path = require('path');

module.exports = {
    entry: {
        app: './src/file.js'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['babel-preset-env'] // <-- here
                        }
                    }
                ]
            }
        ]
    }
}