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

总结

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

赞 (0)

相关推荐

  • webpack独立打包和缓存处理详解

    webpack独立打包和缓存处理详解

    前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpack拆分.打包.压缩的使用方法.本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方法. 上篇文章中写了一份webpack最基本的配置文件来打包压缩我们的代码: var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js'

  • Webpack打包慢问题的完美解决方法

    Webpack打包慢问题的完美解决方法

    前言 这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具.但是开发过程中遇到一个很棘手的问题就是,React 加上 React-Router.superagent.eventproxy 这些第三方轮子一共有好几百个 module,Webpack 的打包速度极慢.这对于开发是非常不好的体验,同时效率也极低. 问题分析 我们先来看一下完全没有任何优化的时候,Webpack 的打包速度(使用了jsx和babel的loader). 下面是我们

  • Webpack实现按需打包Lodash的几种方法详解

    前言 在数据操作时,Lodash 就是我的弹药库,不管遇到多复杂的数据结构都能用一些函数轻松拆解. ES6 中也新增了诸多新的对象函数,一些简单的项目中 ES6 就足够使用了,但还是会有例外的情况引用了少数的 Lodash 函数.一个完整的 Lodash 库,即使是压缩后,现最新版本也有 71k 的体积.不能为了吃一口饭而买下一个饭店啊. 针对这个问题,其实已经有很多可选方案了. 函数模块 Lodash 中的每个函数在 NPM 都有一个单独的发布模块.NPM: results for 'loda

  • webpack打包后直接访问页面图片路径错误的解决方法

    webpack打包后直接访问页面图片路径错误的解决方法

    前言 本文说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 webpack.config.js var Webpack = require("webpack"); var path = require("path"); module.exports = { entry: './js/entry.js', output:

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

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

    前言 最近在用webpack打包react代码的时候发现一个问题,做一个处理总结分享出来给大家,下面来一起看看详细的介绍: 我的webpack配置: var webpack = require('webpack'); //打包less插件 var ExtractTextPlugin = require('extract-text-webpack-plugin'); //这里的'./css/bundle.css'设置打包地址 var ExtractLess = new ExtractTextPlu

  • 引入JS文件IE6报语法错误或缺少对象问题的解决方法

    解决"引入JS文件IE6报错"的问题 问题描述: 页面引入一个js文件,其中定义了函数或对象,然后在页面中调用函数或对象时,在IE6会报"语法错误"或"缺少对象".在IE6+或者IE7却运行正常. 问题分析: 这个对象在引入的JS文件中是存在的,因为在IE6+以上的浏览器都可以正常运行.这个问题在于文件编码上,如果JS文件编码与当前页面的编码不一致,就可能导致在IE6中页面不能正常获取和解析JS文件中的内容,在IE6中,默认引入的文件和页面的编码

  • 解决idea中maven项目无端显示404错误的方法

    解决idea中maven项目无端显示404错误的方法

    问题描述: 有时我们会发现idea中创建的maven项目老是显示项目路径找不到,自己反复检查代码也没发现错误,如何你项目的web.xml是直接由idea默认创建的,而你的头文件又是后来直接用3.1或者更高的版本(推荐3.1版本)覆盖的原来的头文件,那我这篇博客就对你有帮助了. 问题原因: 当我们idea使用maven创建web项目时,idea默认提供的web.xml非常古老,功能不完善.如果我们只是单纯替换其头文件的话是没有用的,idea中web.xml的配置还是没有变. 如何解决: 1.将原来

  • 解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法

    最近用ThinkPHP开发一个项目,集成了批量上传文件插件Uploadify,在谷歌Chrome和IE下都能正常上传,只有火狐下提示这个错误,网上找了很多解决办法,基本都说flash在firefox下重新发起session会话,由于session没有验证通过所以报错,这个问题网上有很多解决方案,但是试了很多,都没有真正解决我的问题,最后看了官方的解决方案 http://www.uploadify.com/documentation/uploadify/using-sessions-with-up

  • 解决Python3.8运行tornado项目报NotImplementedError错误

    今天拉了一个使用了tornado的项目在本地跑,按照源码作者的步骤配置完,运行,直接报错了,要求环境Python3.6+,我装的是Python3.8,理论上应该直接正常运行的,报错信息: Traceback (most recent call last):   File "ice_server.py", line 150, in <module>     RunServer.run_server(port=p, host=h)   File "ice_server

  • 解决Navicat for MySQL 连接 MySQL 报2005错误的问题

    解决Navicat for MySQL 连接 MySQL 报2005错误的问题

    上篇文章给大家介绍过解决Navicat for Mysql连接报错1251的问题(连接失败),今天介绍Navicat for MySQL 连接 MySQL 报2005错误的问题. 关于Navicat for MySQL 连接 MySQL 报2005 -Unknown MySQL server host 'localhost'(0)错误的情况与解决方法 2005报错原因: 在本地MySQL的服务启动后,由于Navicat的一些功能需要联网才可以使用,由于报错提示说连接不上主机的localhost,

  • 解决spring boot + jar打包部署tomcat 404错误问题

    解决spring boot + jar打包部署tomcat 404错误问题

    1.spring boot 不支持jsp打jar包,jsp只能打war包. 方法: <packaging>war</packaging> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin

  • 在PHP中检查PHP文件是否有语法错误的方法

    之前在当当的时候的一个项目中用到了一个简单的模板引擎,其实也是借鉴discuz来做的模板引擎,很简单,它所作的事情就是把一些自定义的标签编译成php代码.已经说了很简单了,所以编译的时候也名优进行模板语法的检查,那么在开发过程中就会出现编译出来的php文件有语法问题,有语法问题没有关系,我修改重新编译一下就好了.首先不能在每次请求的时候都把php模板重新编译一下,会严重影响性能,折中的处理时在每个编译好的php文件末尾检查一下该模板文件是否已经修改过,根据设定的更新频率,如果又需要则重新编译模板

  • webpack+react+antd脚手架优化的方法

    在之前的文章中了解了webpack v4的特性,现在将知识用于实践,对之前写的一个react脚手架进行打包性能的优化. 优化类目 样式分离 第三方资源分离 区分开发环境 热更新 提取公共代码 1. CSS分离 npm install extract-text-webpack-plugin -D webpack.config.js 将css.less.sass文件单独从打包文件中分离 + let cssExtract = new ExtractTextWebpackPlugin({ + filen

  • webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改,改为 目的是将资源文件的引入路径,改为相对地址(相对index.html) 二.此时html中的js.css.img引入均没有问题,但是css中的background-image还是报404 此

随机推荐