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 相关文章推荐
jquery清空textarea等输入框实现代码
Apr 22 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
Vue实现剪切板图片压缩功能
Feb 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 discuz 主题表和回帖表的设计
2009/03/13 PHP
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
vue观察模式浅析
2018/09/25 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python中turtle作图示例
2017/11/15 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
django的csrf实现过程详解
2019/07/26 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
预备党员党支部意见
2015/06/02 职场文书
delete in子查询不走索引问题分析
2022/07/07 MySQL