vue 解决uglifyjs-webpack-plugin打包出现报错的问题


Posted in Javascript onAugust 04, 2020

楼主最新对已做项目进行打包优化,配置了打包环境下去除console.log语句插件---使用uglifyjs-webpack-plugin

具体代码如下

npm install uglifyjs-webpack-plugin -D
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

configureWebpack: config => {
    if (isProduction) {
      config.plugins = config.plugins.concat(
        [
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                warnings: false,
                drop_debugger: true,
                drop_console: true,
              },
            },
            sourceMap: false,
            parallel: true,
          })

        ]
      )
    }

然后打包发现报错

vue 解决uglifyjs-webpack-plugin打包出现报错的问题

⠧ Building for production...

 ERROR Failed to compile with 1 errors                                                     上午10:10:12

 error

assets/js/about.e1f1ea37.js from UglifyJs
Unexpected token: keyword (const) [assets/js/about.e1f1ea37.js:13062,0]

 ERROR Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! thua@0.1.0 build: `vue-cli-service build --mode production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the thua@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!   /Users/chenya/.npm/_logs/2019-01-15T02_10_12_281Z-debug.log

把new UglifyJsPlugin插件注释掉即可成功打包。

但是,楼主我一点都不乐意,凭啥不让我用UglifyJsPlugin插件!

于是不求人的我开始上网查资料,搜索Unexpected token: keyword (const),搜索列表点第一个进去看,大致说是因为项目有的文件没有es6转es5,即还存在const变量名。

????(黑人问号)。我的vue配置是自动用babel把es6转es5的呀,搞锤子呢。

于是脑洞回想一下,是不是哪里有文件打包进去没有用到babel???

咦。。。。。。。是不是,。。那个。。。。node_modules下的依赖。。。。。

再仔细想想,看看代码。。。。。有一个animejs(用于动效)、还有一个vue-particles (canvas用于登录页背景特效)

找到问题了,下一步就是如何显示的把node_modules下的依赖用babel 转译。

楼主用的vue-cli3脚手架,翻山越岭的查找vue-cli3的官方资料,终于找到你。。。。。

transpileDependencies

transpileDependencies

Type: Array<string | RegExp>

Default: []

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。

还好我没放弃~~~~

transpiledependencies参数接受一个数组,数组里可以是字符串也可以正则表达式。

附上楼主的配置

transpileDependencies: [
    'vue-particles',
    'animejs'
  ],

完美解决~

vue 解决uglifyjs-webpack-plugin打包出现报错的问题

开开心心下班回家~~~~~

2020年06月11日08:57:07 更新

楼主已弃用 uglifyjs-webpack-plugin 插件啦。现在用的是 terser-webpack-plugin

vue 解决uglifyjs-webpack-plugin打包出现报错的问题

以上这篇vue 解决uglifyjs-webpack-plugin打包出现报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
javascript获取当前ip的代码
May 10 Javascript
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
Javascript的一种模块模式
Sep 08 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 #Javascript
解决vuecli3中img src 的引入问题
Aug 04 #Javascript
简介JavaScript错误处理机制
Aug 04 #Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 #Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 #Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 #Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 #Javascript
You might like
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Python实现excel转sqlite的方法
2017/07/17 Python
python中Apriori算法实现讲解
2017/12/10 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Python实现网站表单提交和模板
2019/01/15 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
Django Form常用功能及代码示例
2020/10/13 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
大学教师年终总结的自我评价
2013/10/29 职场文书
创新比赛获奖感言
2014/02/13 职场文书
质量承诺书格式
2014/05/20 职场文书
大一新生检讨书
2014/10/29 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书