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数组随机排序实例分析
Jul 22 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
浅谈在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
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
js电话号码验证方法
2015/09/28 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
vue-router传参用法详解
2019/01/19 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
Python内置函数OCT详解
2016/11/09 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
ORACLE第二个十问
2013/12/14 面试题
简历自荐信
2013/12/02 职场文书
员工生日会策划方案
2014/06/14 职场文书
投资意向书
2014/07/30 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js