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 相关文章推荐
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
JavaScript 监听textarea中按键事件
Oct 08 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
vue el-table实现自定义表头
Dec 11 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
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
php常用字符函数实例小结
2016/12/29 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
python利用正则表达式提取字符串
2016/12/08 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
Python决策树分类算法学习
2017/12/22 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Pytorch之finetune使用详解
2020/01/18 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
Python可以用来做什么
2020/11/23 Python
python regex库实例用法总结
2021/01/03 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
校园学雷锋活动月总结
2014/03/09 职场文书
会议主持词
2014/03/17 职场文书
团委竞选演讲稿
2014/04/24 职场文书
环境保护建议书
2014/08/26 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
史上最牛辞职信
2015/05/13 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
创业计划之特色精品店
2019/08/12 职场文书
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫