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操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 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设计模式之调解者模式的深入解析
2013/06/13 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
使用python实现ANN
2017/12/20 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
python读取文本中的坐标方法
2018/10/14 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
AJAX的全称是什么
2012/11/06 面试题
金融专业个人求职信范文
2013/11/28 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
中学校庆方案
2014/03/17 职场文书
绿色环保标语
2014/06/12 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
机关作风建设心得体会
2014/10/22 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
高一化学教学反思
2016/02/22 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书