解决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 相关文章推荐
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
npm scripts 使用指南详解
Oct 08 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异步调用socket实现代码
2012/01/12 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
详解react-redux插件入门
2018/04/19 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
深入浅析Python字符编码
2015/11/12 Python
Win8下python3.5.1安装教程
2020/07/29 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
食品营养与检测应届生求职信
2013/11/08 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
Python PIL按比例裁剪图片
2022/05/11 Python