解決webpack -p壓縮打包react報(bào)語法錯(cuò)誤的方法

更新時(shí)間：2017年07月03日 11:37:00 作者：前端藝術(shù)者

這篇文章主要給大家介紹了關(guān)于解決webpack -p壓縮打包react報(bào)語法錯(cuò)誤的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。

前言

最近在用webpack打包react代碼的時(shí)候發(fā)現(xiàn)一個(gè)問題，做一個(gè)處理總結(jié)分享出來給大家，下面來一起看看詳細(xì)的介紹：

我的webpack配置：

var webpack = require('webpack');
//打包less插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//這里的'./css/bundle.css'設(shè)置打包地址
var ExtractLess = new ExtractTextPlugin('./css/bundle.css');
//打包多個(gè)文件插件
//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的直接轉(zhuǎn)為base64
   { test: /\.(png|jpg)$/, loader: 'url-loader?q=8192'}

  ]
 },
 resolve:{
  extensions:['','.js']
  },

 plugins:[
  ExtractLess,
  
 ]
};

上面看上去一切正常，運(yùn)行webpack -w時(shí)候也沒有任何問題

但是如果我使用-p壓縮的話就會(huì)報(bào)錯(cuò)：

解決方案：UglifyJsPlugin插件

在webpack包里面已經(jīng)自帶這個(gè)UglifyJsPlugin，我們只要在webpack中的plugins添加即可，代碼如下

 plugins:[
  new webpack.optimize.UglifyJsPlugin({
   compress:{
    warnings:false
   },
   mangle:{
    except:['$super','$','exports','require']
   }
  })
 ]

UglifyJsPlugin可以防止$super, $, exports , require,不會(huì)被混淆,設(shè)置warnings:false就打包時(shí)候即可消除warings報(bào)警了

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

React實(shí)現(xiàn)基于Antd密碼強(qiáng)度校驗(yàn)組件示例詳解
這篇文章主要為大家介紹了React實(shí)現(xiàn)基于Antd密碼強(qiáng)度校驗(yàn)組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
在?React?中使用?i18next的示例
這篇文章主要介紹了在?React?中使用?i18next,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01
React八大常見錯(cuò)誤及其解決方案
這篇文章主要介紹了React八大常見錯(cuò)誤及其解決方案,并通過代碼示例介紹的非常詳細(xì),對大家學(xué)習(xí)react有一定的幫助,感興趣的朋友可以參考下
2024-03-03
React中的Hooks路由跳轉(zhuǎn)問題
這篇文章主要介紹了React中的Hooks路由跳轉(zhuǎn)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
聊聊ant?design?charts?獲取后端接口數(shù)據(jù)展示問題
今天在做項(xiàng)目的時(shí)候遇到幾個(gè)讓我很頭疼的問題，一個(gè)是通過后端接口成功訪問并又返回?cái)?shù)據(jù)，但拿不到數(shù)據(jù)值。其二是直接修改state中的data，console中數(shù)組發(fā)生變化但任然數(shù)據(jù)未顯示，這篇文章主要介紹了ant?design?charts?獲取后端接口數(shù)據(jù)展示,需要的朋友可以參考下
2022-05-05
React-Native使用Mobx實(shí)現(xiàn)購物車功能
本篇文章主要介紹了React-Native使用Mobx實(shí)現(xiàn)購物車功能，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
react+antd4實(shí)現(xiàn)優(yōu)化大批量接口請求
這篇文章主要為大家詳細(xì)介紹了如何使用react hooks + antd4實(shí)現(xiàn)大批量接口請求的前端優(yōu)化,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下
2024-02-02
淺談redux以及react-redux簡單實(shí)現(xiàn)
這篇文章主要介紹了淺談redux以及react-redux簡單實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
react-routerV6版本和V5版本的詳細(xì)對比
React-Router5是React-Router6的前一個(gè)版本,它已經(jīng)被React-Router6取代,React-Router 6是一次較大的重大更新,本文就來介紹一下react-routerV6版本和V5版本的詳細(xì)對比,感興趣的可以了解一下
2023-12-12
淺談React多個(gè)setState會(huì)調(diào)用幾次
在React的生命周期鉤子和合成事件中，多次執(zhí)行setState，會(huì)被調(diào)用幾次，本文就詳細(xì)的介紹一下，感興趣的可以了解一下
2021-11-11