解決webpack -p壓縮打包react報語法錯誤的方法
前言
最近在用webpack打包react代碼的時候發(fā)現(xiàn)一個問題,做一個處理總結(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'); //打包多個文件插件 //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
時候也沒有任何問題
但是如果我使用-p
壓縮的話就會報錯:
解決方案:UglifyJsPlugin插件
在webpack包里面已經(jīng)自帶這個UglifyJsPlugin,我們只要在webpack中的plugins添加即可,代碼如下
plugins:[ new webpack.optimize.UglifyJsPlugin({ compress:{ warnings:false }, mangle:{ except:['$super','$','exports','require'] } }) ]
UglifyJsPlugin可以防止$super, $, exports , require,不會被混淆,設(shè)置warnings:false
就打包時候即可消除warings報警了
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
React-Router(V6)的權(quán)限控制實(shí)現(xiàn)示例
本文主要介紹了React-Router(V6)的權(quán)限控制實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05解決React報錯You provided a `checked` prop&n
這篇文章主要為大家介紹了React報錯You provided a `checked` prop to a form field的解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12React中使用Axios發(fā)起POST請求提交文件方式
這篇文章主要介紹了React中使用Axios發(fā)起POST請求提交文件方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02React源碼state計算流程和優(yōu)先級實(shí)例解析
這篇文章主要為大家介紹了React源碼state計算流程和優(yōu)先級實(shí)例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11React 使用recharts實(shí)現(xiàn)散點(diǎn)地圖的示例代碼
這篇文章主要介紹了React 使用recharts實(shí)現(xiàn)散點(diǎn)地圖的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12Vite+React搭建開發(fā)構(gòu)建環(huán)境實(shí)踐記錄
這篇文章主要介紹了Vite+React搭建開發(fā)構(gòu)建環(huán)境實(shí)踐,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09基于Webpack5 Module Federation的業(yè)務(wù)解耦實(shí)踐示例
這篇文章主要為大家介紹了基于Webpack5 Module Federation的業(yè)務(wù)解耦實(shí)踐示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12