欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決webpack -p壓縮打包react報語法錯誤的方法

 更新時間:2017年07月03日 11:37:00   作者:前端藝術(shù)者  
這篇文章主要給大家介紹了關(guān)于解決webpack -p壓縮打包react報語法錯誤的方法,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。

前言

最近在用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)示例

    本文主要介紹了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 to a form field

    解決React報錯You provided a `checked` prop&n

    這篇文章主要為大家介紹了React報錯You provided a `checked` prop to a form field的解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • react 父組件與子組件之間的值傳遞的方法

    react 父組件與子組件之間的值傳遞的方法

    本篇文章主要介紹了react 父組件與子組件之間的值傳遞的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • React中使用Axios發(fā)起POST請求提交文件方式

    React中使用Axios發(fā)起POST請求提交文件方式

    這篇文章主要介紹了React中使用Axios發(fā)起POST請求提交文件方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • React源碼state計算流程和優(yōu)先級實(shí)例解析

    React源碼state計算流程和優(yōu)先級實(shí)例解析

    這篇文章主要為大家介紹了React源碼state計算流程和優(yōu)先級實(shí)例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • react中監(jiān)聽props的改變方式

    react中監(jiān)聽props的改變方式

    這篇文章主要介紹了react中監(jiān)聽props的改變方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • React 使用recharts實(shí)現(xiàn)散點(diǎn)地圖的示例代碼

    React 使用recharts實(shí)現(xiàn)散點(diǎn)地圖的示例代碼

    這篇文章主要介紹了React 使用recharts實(shí)現(xiàn)散點(diǎn)地圖的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • Vite+React搭建開發(fā)構(gòu)建環(huán)境實(shí)踐記錄

    Vite+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í)踐示例

    這篇文章主要為大家介紹了基于Webpack5 Module Federation的業(yè)務(wù)解耦實(shí)踐示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-12-12
  • React?中state與props更新深入解析

    React?中state與props更新深入解析

    這篇文章主要為大家介紹了React?中state與props更新深入解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11

最新評論