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

 更新时间:2017年07月03日 11:37:00   作者:前端艺术者  
这篇文章主要给大家介绍了关于解决webpack -p压缩打包react报语法错误的方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

前言

最近在用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报警了

总结

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

相关文章

  • React 服务器组件的使用方法详解

    React 服务器组件的使用方法详解

    最近,React 服务器组件受到了广泛的关注和热捧,这是因为 React 服务器组件允许开发人员将与组件相关的任务外包给服务器,在本文中,我们将讨论什么是 React 服务器组件,以及如何将它们集成到构建应用程序中,需要的朋友可以参考下
    2023-10-10
  • react 实现页面代码分割、按需加载的方法

    react 实现页面代码分割、按需加载的方法

    本篇文章主要介绍了react 实现页面代码分割、按需加载的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • react中如何使用局部样式

    react中如何使用局部样式

    这篇文章主要介绍了react中如何使用局部样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • react Table准备Spin Empty ConfigProvider组件实现

    react Table准备Spin Empty ConfigProvider组件实现

    这篇文章主要为大家介绍了react Table准备Spin、Empty、ConfigProvider组件实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-02-02
  • react的ui库antd中form表单使用SelectTree反显问题及解决

    react的ui库antd中form表单使用SelectTree反显问题及解决

    这篇文章主要介绍了react的ui库antd中form表单使用SelectTree反显问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • React配置子路由的实现

    React配置子路由的实现

    本文主要介绍了React配置子路由的实现,我们来通过一个简单的例子解释一下如何配置子路由,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • React setState是异步还是同步原理解析

    React setState是异步还是同步原理解析

    这篇文章主要为大家介绍了React setState是异步还是同步原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 基于React实现无限滚动表格

    基于React实现无限滚动表格

    以文本为例,为了实现无限循环的视觉效果,我们需要准备两段相同的文本,并让第二段文本的头部衔接在第一段文本的尾部,同时,为两段文本设置相同的滚动动画,本文给大家介绍了基于React实现无限滚动表格,需要的朋友可以参考下
    2023-11-11
  • 详解React中key的作用

    详解React中key的作用

    这篇文章主要介绍了React中key的作用,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-04-04
  • 浅谈React高阶组件

    浅谈React高阶组件

    这篇文章主要介绍了浅谈React高阶组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论