解决webpack -p压缩打包react报语法错误的方法


Posted in Javascript onJuly 03, 2017

前言

最近在用webpack打包react代码的时候发现一个问题,做一个处理总结分享出来给大家,下面来一起看看详细的介绍:

我的webpack配置:

var webpack = require('webpack');
//打包less插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//这里的'./css/bundle.css'设置打包地址
var ExtractLess = new ExtractTextPlugin('./css/bundle.css');
//打包多个文件插件
//var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
var path = require('path');
module.exports = {
 entry:[
  './reactDom/index.js'
 ],
 output:{
  path:'./build',
  filename:'indexReact.js'
 },
 module:{
  loaders:[
   {test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel',query:{presets:['es2015','react']}},
   {test:/\.less$/,loader:ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")},
   //图片文件使用 url-loader 来处理,小于8kb的直接转为base64
   { test: /\.(png|jpg)$/, loader: 'url-loader?q=8192'}

  ]
 },
 resolve:{
  extensions:['','.js']
  },

 plugins:[
  ExtractLess,
  
 ]
};

上面看上去一切正常,运行webpack -w时候也没有任何问题

解决webpack -p压缩打包react报语法错误的方法                            

但是如果我使用-p压缩的话就会报错:

解决webpack -p压缩打包react报语法错误的方法                            

解决方案:UglifyJsPlugin插件

在webpack包里面已经自带这个UglifyJsPlugin,我们只要在webpack中的plugins添加即可,代码如下

plugins:[
  new webpack.optimize.UglifyJsPlugin({
   compress:{
    warnings:false
   },
   mangle:{
    except:['$super','$','exports','require']
   }
  })
 ]

UglifyJsPlugin可以防止$super, $, exports , require,不会被混淆,设置warnings:false就打包时候即可消除warings报警了

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 #Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 #Javascript
微信小程序开发中的疑问解答汇总
Jul 03 #Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 #Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 #Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 #Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 #Javascript
You might like
一个PHP的QRcode类与大家分享
2011/11/13 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
浅谈json_encode用法
2015/03/05 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
JS实现手写parseInt的方法示例
2017/09/24 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
微信跳一跳游戏python脚本
2020/04/01 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python中reader的next用法
2018/07/24 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
Python实现把类当做字典来访问
2019/12/16 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
如何利用Python写个坦克大战
2020/11/18 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
大学生如何写自荐信
2014/01/08 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
给校长的建议书300字
2014/05/16 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
会议通知范文
2015/04/15 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers