解决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 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
计算机应用毕业生自荐信
2013/10/23 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
人事专员的职责
2014/02/26 职场文书
促销活动计划书
2014/05/02 职场文书
班组拓展活动方案
2014/08/14 职场文书
委托培训协议书
2014/11/17 职场文书
同事离别感言
2015/08/04 职场文书
诚信考试主题班会
2015/08/17 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS