Webpack 4.8与Babel 7生产编译后运行异常求助

我之前踩过几乎一模一样的坑，这个错误本质是Promise.prototype上的自定义config方法在生产压缩过程中被UglifyJS/Terser给混淆或移除了，结合你的配置，给你几个针对性的排查和解决步骤：

一、先定位问题根源 #

首先得搞清楚到底是哪个库给Promise挂载了config方法：

• 在开发环境里打开控制台，直接打印Promise.prototype，看看有没有config属性，然后通过调用栈或者依赖分析工具（比如你已经配置的analyze:build命令，跑一下看看）追踪这个方法来自哪个依赖包。
• 另外，错误里的n.e(...)是webpack动态导入（import()）的chunk加载逻辑，说明问题大概率出在某个异步加载的模块里，你可以重点排查所有用import()引入的组件/模块对应的依赖。

二、调整压缩工具配置，保留config方法 #

webpack 4+生产模式默认用terser-webpack-plugin替代了UglifyJS，你需要让压缩工具不要混淆或移除Promise的config方法：

如果用TerserPlugin（默认） #

修改你的webpack.config.js，添加Terser的自定义配置：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ...其他已有配置
  optimization: {
    // 保留你原有的splitChunks配置
    splitChunks: { /* ...你的原有代码... */ },
    // 添加minimizer配置
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          mangle: {
            // 保留Promise以及它的config方法不被混淆
            reserved: ['Promise', 'config']
          },
          compress: {
            // 保留函数/类名称，避免因为名称混淆导致方法丢失
            keep_fnames: true,
            keep_classnames: true
          }
        }
      })
    ]
  }
};

如果还在使用UglifyJSPlugin #

如果你的项目明确依赖UglifyJS，配置类似：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  optimization: {
    splitChunks: { /* ...你的原有代码... */ },
    minimizer: [
      new UglifyJSPlugin({
        uglifyOptions: {
          mangle: {
            reserved: ['Promise', 'config']
          },
          compress: {
            keep_fnames: true
          }
        }
      })
    ]
  }
};

三、修正Babel配置，确保Promise Polyfill正确加载 #

你用了@babel/plugin-transform-runtime，但可能没有正确配置corejs，导致Promise的扩展没有被正确处理：

修改你的.babelrc：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": { "browsers": "last 2 versions" },
      "useBuiltIns": "usage",
      "corejs": 3 // 先确保你安装了corejs@3：npm i corejs@3 --save
    }],
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 3 // 和上面的corejs版本保持一致
    }],
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties",
    "react-hot-loader/babel"
  ]
}

注意：如果用了useBuiltIns: 'usage'，就不要再手动在入口文件引入@babel/polyfill了，Babel会自动按需注入polyfill。

四、排查SplitChunks配置的影响 #

你的splitChunks把core模块抽离了，可能Promise相关的代码被分到了不同chunk，导致加载顺序问题：

• 可以先临时注释掉splitChunks配置，重新打包生产环境看看问题是否消失。如果消失了，说明是chunk拆分导致的，你需要调整cacheGroups，把包含Promise扩展的依赖加到core或者同一个chunk里。

最后总结 #

这个问题的核心是自定义Promise方法在压缩时被误处理，先定位到哪个依赖加了config方法，再通过压缩工具配置保留该方法，同时确保Babel的polyfill配置正确，基本就能解决。

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