前言:在用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时候也没有任何问题

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

解决方案: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报警了

webpack -p压缩打包react报语法错误处理的更多相关文章

  1. ajax请求报语法错误

    今天改代码修正完一个ajax请求后,调试发现出错进error方法,查看错误信息报语法错误,具体是调用parseJSON方法时出错,因为我是用json方式传递的参数,所以第一时间查看data参数是否正确 ...

  2. PHP echo一个对象报语法错误,为什么?

    为什么直接echo一个对象就会报语法错误,而如果这个对象实现了__toString方法后就可以直接输出呢? 原因是echo本来可以打印一个对象,而且也实现了这个接口,但是PHP对其做了个限制,只有实现 ...

  3. mybatis 批量update报语法错误解决方法

    1.为什么会报语法错误 原因:在 *.xml文件内使用了循环,在mybatis中默认是不允许使用批量修改. <update id="setMaxMin" parameterT ...

  4. react 报红错误汇总

    react  报红错误汇总 一.Uncaught TypeError: Cannot read property 'value' of undefined 未知类型错:无法读取未定义的属性“value ...

  5. python3下tomorow模块 @thread报语法错误def async(n, base_type, timeout=None): ^ SyntaxError: invalid syntax---解决方法

    遇见问题:python使用tomorrow实现多线程,tomorrow模块的源代码报语法错误? 这是报错信息:Traceback (most recent call last):  File &quo ...

  6. MySQL 灵异事件一则 -- desc报语法错误

    今天有一开发同学找到我,说查询SQL中倒序报错,不明原因,于是奔赴工位现场研究情况. 果然,只要SQL中带有desc 就会报错,而ASC没问题. 哪怕desc放在句首用作explain也会报错. 报错 ...

  7. vue项目在ie浏览器下报语法错误

    错误如下: 1.用vue 写的项目最多可以兼容到IE9 及以上版本 2.使用babel-polyfill做兼容npm install babel-polyfill --save-dev 安装之后如果发 ...

  8. vue webpack 引入iview iview内部文件报语法错误

    错误如下: 是因为 es6 语法没有成功转化 因为 我的项目是别人做好的已经部署的项目 ,但是用到的是es2015  配置es2015并不起作用 是因为es2015已经过期了 安装的时候回有类似下面的 ...

  9. weex初始化启动webpack.common.conf.js中的...报语法错误

    使用Babel转码 // 最新转码规则 $ npm install --save-dev-g babel-preset-env // react转码规则 $ npm install --save-de ...

随机推荐

  1. Python中函数、类、模块和包的调用

    初学python阶段,大多数人对函数.类.模块和包的调用都搞得不是很清楚,这篇随笔就简单的进行说明. (1)函数 当函数定义好之后,可以直接调用. 比如:def summ(add1,add2),那么 ...

  2. synchronized使用说明

    好久没有更新博客了,今天试着用简单的语言把synchronized的使用说清楚. synchronized是什么? synchronized是用来保证在多线程环境下代码同步执行的可重入的互斥锁.所谓互 ...

  3. javaScript数据类型及判断

    ECMAScript数据类型概念: ECMAScript数据类型分为两类:原始类型和对象类型(即基本类型和引用类型): ECMAScript数据类型也可以分为可变类型和不可变类型,数组和对象属于可变类 ...

  4. PPM图片格式及其C读写代码

    PPM图像格式介绍 PPM图像格式是由Jef Poskanzer 大叔,在我出生那一年,也就是1991年所创造的,碰巧的是PPM也是天蝎座. PPM(Portable Pixmap Format)还有 ...

  5. DNS解析过程详解

    先说一下DNS的几个基本概念: 一. 根域 就是所谓的“.”,其实我们的网址www.baidu.com在配置当中应该是www.baidu.com.(最后有一点),一般我们在浏览器里输入时会省略后面的点 ...

  6. 什么时候用Model,什么时候用Entity?

    在建立一个实体类的时候,究竟是用Model还是用Entity?比如MVC中,Model存了数据实体,但是他被称为Model,而在EF中,Entity也是存放数据实体,却被称作Entity,这两者有何区 ...

  7. web前端页面性能优化

    影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...

  8. xposed XDA记录

    [OFFICIAL] Xposed for Lollipop/Marshmallow [Android 5.0/5.1/6.0, v86, 2016/10/31] http://forum.xda-d ...

  9. mysql 5.7.14 免安装配置方法教程

    仅供参考 一.下载 1. 进入mysql官网,下载Mysql-5.7.14,下载地址:http://dev.mysql.com/downloads/mysql/ 2.将下载好的文件解压到自定义目录 二 ...

  10. js中的斐波那契数列法

    //斐波那契数列:1,2,3,5,8,13…… //从第3个起的第n个等于前两个之和 //解法1: var n1 = 1,n2 = 2; for(var i=3;i<101;i++){ var ...