我在使用 Webpack 和 Babel 时遇到了问题。我正在尝试将我的 JavaScript 代码转换成一个包文件。这是文件结构和片段:
文件结构:
- 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']
}
}
]
}
]
}
}
当我输入
webpack --mode development
,它会创建文件 app.bundle.js
成功进入目录build
.但是,它似乎不能正常工作,因为在
build/app.bundle.js
的末尾我正在寻找来自 src/file.js
的代码我有以下几点:/*! 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?");
/***/ })
这很奇怪,我不应该简单地拥有这个吗?
/***/ (function(module, exports, __webpack_require__) {
"use strict";
let fun = () => console.log('Hello World')
/***/ })
是不是配置有问题?
最佳答案
这其实不是因为 babel,而是因为 webpack。它需要一个名为 devtool
的选项决定是否应该eval
代码或使用某种源映射。
您可能正在寻找以下内容:
// webpack.config.js (excerpt)
module.exports = {
// ...
devtool: 'inline-source-map'
// ...
};
inline-source-map
省略 eval 以支持包内的 - 良好 - 内联的源映射。但是不要将它用于生产;-)devtool
有几个选项各有优缺点。有关该主题的更多信息,请参阅 official webpack documentation .
关于Webpack Babel-loader 使用 eval() 转译代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50358773/