Webpack Babel-loader transpiles code with eval()

六眼飞鱼酱① 提交于 2019-12-23 09:39:18

问题


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?


回答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.




回答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
                        }
                    }
                ]
            }
        ]
    }
}


来源:https://stackoverflow.com/questions/50358773/webpack-babel-loader-transpiles-code-with-eval

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!