MVC项目通过Webpack引入Bootstrap5报loader及UglifyJs错误如何解决？

问题根源 #

• 第一个错误（bootstrap.esm.js解析失败）：你的webpack配置中babel-loader排除了整个node_modules目录，导致Bootstrap5自带的ESM版本代码未经过Babel转译，且你安装的对象展开语法插件是Babel7版本，和当前使用的Babel6版本不兼容，转译规则未生效。
• 第二个/第三个错误（UglifyJs压缩失败）：旧版UglifyJs仅支持ES5语法压缩，你打包产物中还存在未转译的ES6+语法（如amcharts中的BSTChart类声明），导致压缩报错。

解决步骤 #

1. 修复Babel插件版本不兼容问题
   卸载Babel7版本的展开语法插件，安装适配Babel6的对应插件：

   npm uninstall @babel/plugin-proposal-object-rest-spread
   npm install babel-plugin-transform-object-rest-spread --save-dev
   

2. 修改Babel转译白名单，不排除Bootstrap和amcharts
   调整webpack.config.js中babel-loader的exclude规则，将Bootstrap和amcharts加入转译白名单，同时补全babel预设配置：

   {
     test: /\.js$/,
     loader: 'babel-loader',
     query: {
       presets: ['es2015', 'stage-0'],
       plugins: ['transform-object-rest-spread']
     },
     // 仅排除node_modules中除了bootstrap、@amcharts之外的包
     exclude: /node_modules\/(?!(bootstrap|@amcharts)\/)/
   }
   

3. （可选，快速生效方案）直接引入Bootstrap5的ES5预编译版本
   如果你不想调整转译规则，可以在site.js中直接引入Bootstrap预先编译好的ES5版本，跳过转译步骤：

   // 替换原来的import 'bootstrap'写法为以下内容
   import 'bootstrap/dist/js/bootstrap.min.js'
   

4. （可选，修复UglifyJs兼容问题）替换压缩工具
   如果调整白名单后UglifyJs仍报错，可以将webpack生产配置中的UglifyJs插件替换为支持ES6+压缩的terser-webpack-plugin，适配新版语法的压缩需求。

内容的提问来源于stack exchange，提问作者Vignesh Kumar A