Name expected [js/chunk-4b5816b5.0950b124.js:250,6] from UglifyJs

简介: Name expected [js/chunk-4b5816b5.0950b124.js:250,6] from UglifyJs

问题


vue 项目可以正常启动运行,但是使用 vuecli3 打包时却 js 报错,项目里使用了 html2canvas 跟 jspdf,然后打包里面使用了 uglifyjs-webpack-plugin

913989536e6f4256a888da10e59e901b.png


原因跟解决方案


因为 uglifyjs-webpack-plugin 不支持新的 es6 语法,解决方法就是使用 terser-webpack-plugin@4.2.3 替换 uglifyjs-webpack-plugin@2.2.0 即可。


vue.config.jsuglifyjs-webpack-plugin@2.2.0 配置

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");


configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer = [
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: true, // 删除注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: true, // 删除debugger
              pure_funcs: ["console.log"],
            }
          }
        })
      ];
    }
}


改成 vue.config.jsterser-webpack-plugin@4.2.3 配置,注意这里需要用 4.x 版本的

const TerserPlugin = require("terser-webpack-plugin");
configureWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
    config.optimization.minimize = true;
    config.plugins.push(
      new TerserPlugin({
        test: /\.js(\?.*)?$/i, // 匹配参与压缩的文件
        parallel: true, // 使用多进程并发运行
        terserOptions: {
          // Terser 压缩配置
          output: { comments: false },
          compress: {
            drop_debugger: true,
            drop_console: true,
            pure_funcs: ['console.log']
          }
        }
      })
    );
  }
}




目录
相关文章
|
5月前
|
JavaScript
npm run build ERROR in static_js_vendor.e475838be75c71f87b37.js from UglifyJs
npm run build ERROR in static_js_vendor.e475838be75c71f87b37.js from UglifyJs
|
JavaScript weex 移动开发
ERROR in index.web.js from UglifyJs
使用weexpack构建weex应用时,npm run serve一直报这个错误 ERROR in index.web.js from UglifyJs Unexpected token: name (urlParts) [index.
3233 0
|
3月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
30 0
|
3月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
81 0
|
14天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握
|
20天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
13 1
|
28天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
2月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
2月前
|
JavaScript
Vue.js学习详细课程系列--共32节(6 / 6)
Vue.js学习详细课程系列--共32节(6 / 6)
28 0
|
2月前
|
JavaScript
Vue.js学习详细课程系列--共32节(5 / 6)
Vue.js学习详细课程系列--共32节(5 / 6)
30 0