Webpack 4+Babel转译代码保留const致Android4.1 WebView报错求助

我之前适配Android 4.1 WebView的时候也踩过这个坑，这个错误本质是Android 4.1的WebView基于Chrome 16内核，完全不支持ES6的const/let语法，哪怕在严格模式下也无法识别。你的Babel和Webpack配置方向是对的，但漏了几个关键细节，下面一步步帮你排查解决：

1. 强制Babel转译const/let到ES5 #

你的.babelrc里已经开启了forceAllTransforms: true，但有时候@babel/preset-env的自动插件选择可能有遗漏，建议手动添加负责块级作用域转换的插件，确保const被彻底转成var：

修改你的.babelrc配置：

{
  "plugins": [
    "lodash",
    "@babel/plugin-transform-block-scoping" // 手动添加插件，强制转译const/let
  ],
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "targets": {
          "android": "4.1"
        },
        "useBuiltIns": "usage",
        "corejs": 3, // 必须指定core-js版本，需先安装core-js@3
        "forceAllTransforms": true,
        "modules": "commonjs" // 强制将ES6模块转成CommonJS，避免WebView不识别
      }
    ],
    "@babel/preset-stage-0"
  ]
}

然后安装缺失的依赖：

npm install @babel/plugin-transform-block-scoping core-js@3 --save-dev

2. 不要完全排除node_modules的转译 #

你的Webpack配置里用了exclude: /node_modules/，但很多第三方依赖（比如某些版本的lodash、React生态库）可能也用了ES6语法，这些未转译的代码会直接导致WebView报错。

修改Webpack的rules，只排除不需要转译的依赖，把需要转译的依赖加入白名单：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.jsx?$/,
        // 排除node_modules里除了lodash（或你用到的其他ES6依赖）之外的代码
        exclude: /node_modules\/(?!(lodash)\/)/,
        loader: "eslint-loader"
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules\/(?!(lodash)\/)/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

提示：如果还有其他依赖（比如axios、react-router）也用了ES6，把它们加到(?!(lodash|axios|react-router)\/)里即可。

3. 验证转译结果 #

打包完成后，打开生成的js文件，搜索const关键字：

• 如果还能找到，说明转译没生效，检查babel-loader是否被其他规则覆盖，或者@babel/preset-env的targets是否正确识别了Android 4.1（可以用npx browserslist android 4.1查看目标浏览器的特性列表）
• 如果找不到const，说明转译成功，再测试WebView运行情况

4. 额外优化：关闭Webpack的ES6模块特性 #

如果你的Webpack版本较高，在production模式下可能会保留一些ES6模块语法，建议在output里明确指定模块类型：

output: {
  // ...其他配置
  libraryTarget: 'var'
}

按照上面的步骤调整后，应该就能解决const相关的语法错误了。Android 4.1的WebView兼容性限制很多，转译时一定要确保所有ES6+语法都被降到ES5级别。

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