Webpack+Babel-loader编译代码出现eval包裹，配置是否有误？

1. 为什么代码被eval包裹？ #

这是Webpack在development模式下的默认行为——它启用了eval-source-map作为devtool选项。这个配置会将每个模块用eval()包裹，并添加sourceURL，目的是在开发时提供快速的源码映射，方便你在浏览器开发者工具中调试原始的src/file.js代码，而不是打包后的bundle代码。

如果你想去掉eval包裹，可以修改webpack.config.js，显式设置devtool为其他值，比如source-map（构建速度会稍慢，但源码映射更完整），或者直接关闭源码映射：

const path = require('path');
module.exports = {
  entry: { app: './src/file.js' },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'app.bundle.js'
  },
  devtool: 'source-map', // 或者设置为false完全关闭
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: { presets: ['env'] }
          }
        ]
      }
    ]
  }
}

2. 为什么代码没有转译为预期的箭头函数/let？ #

首先要明确：Babel的核心作用是将高版本ES语法（如ES6+）转译为低版本兼容语法（如ES5），而不是反过来将ES5转成ES6。从你的描述来看，你的src/file.js是ES5语法（var+普通函数），但预期输出是ES6语法——这不是Babel的常规用法，它默认不会做这种“向上转译”。

如果你的实际需求是将ES6代码转译为ES5但当前转译没生效，可能是以下原因：

• babel-preset-env没有指定目标环境，默认会根据当前运行环境判断，导致部分ES6语法未被转译。你可以明确指定目标浏览器，确保转译覆盖范围：

  // 在webpack.config.js的babel-loader选项中修改
  options: {
    presets: [
      ['env', {
        targets: {
          browsers: ['last 2 versions', 'ie >= 10']
        }
      }]
    ]
  }
  

• 建议创建单独的.babelrc文件管理Babel配置，这样更清晰易维护：

  {
    "presets": [
      ["env", {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 10"]
        }
      }]
    ]
  }
  

  对应webpack.config.js中的babel-loader可以简化为：

  use: ['babel-loader']
  

如果你的真实需求确实是将ES5代码转换为ES6语法，Babel不是合适的工具，你需要使用专门的代码迁移工具（如lebab），但这属于代码重构范畴，不是常规构建流程的一部分。

额外检查点 #

• 确认依赖版本兼容：babel-core@6搭配babel-loader@7、babel-preset-env@1.7.0是兼容的，但后续升级时要注意版本匹配（比如babel-core@7对应@babel/core，babel-loader需要升级到8+）。
• 确认src/file.js中的代码是你想要转译的语法——如果源文件已经是ES5，Babel不会主动将其转为ES6。

内容的提问来源于stack exchange，提问作者Ivan