解决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 相关文章推荐
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
javascript实现复选框选中属性
Mar 25 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
微信小程序实现图片选择并预览功能
Jul 25 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 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框架Symfony2经典入门教程
2014/07/08 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
jQuery 使用手册(二)
2009/09/23 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
Angular(5.2->6.1)升级小结
2018/12/27 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
python实现批量注册网站用户的示例
2019/02/22 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
采购内勤岗位职责
2013/12/10 职场文书
社团文化节策划书
2014/02/01 职场文书
《云房子》教学反思
2014/04/20 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
大型演出策划方案
2014/05/28 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
公司职员入党自传书
2015/06/26 职场文书
7个关于Python的经典基础案例
2021/11/07 Python
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers