vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報錯的問題
樓主最新對已做項目進行打包優(yōu)化，配置了打包環(huán)境下去除console.log語句插件---使用uglifyjs-webpack-plugin
具體代碼如下
npm install uglifyjs-webpack-plugin -D
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
configureWebpack: config => {
if (isProduction) {
config.plugins = config.plugins.concat(
[
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
})
]
)
}
然后打包發(fā)現(xiàn)報錯
⠧ Building for production... ERROR Failed to compile with 1 errors 上午10:10:12 error assets/js/about.e1f1ea37.js from UglifyJs Unexpected token: keyword (const) [assets/js/about.e1f1ea37.js:13062,0] ERROR Build failed with errors. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! thua@0.1.0 build: `vue-cli-service build --mode production` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the thua@0.1.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/chenya/.npm/_logs/2019-01-15T02_10_12_281Z-debug.log
把new UglifyJsPlugin插件注釋掉即可成功打包。
但是，樓主我一點都不樂意，憑啥不讓我用UglifyJsPlugin插件！
于是不求人的我開始上網查資料，搜索Unexpected token: keyword (const)，搜索列表點第一個進去看，大致說是因為項目有的文件沒有es6轉es5，即還存在const變量名。
？？？？（黑人問號）。我的vue配置是自動用babel把es6轉es5的呀，搞錘子呢。
于是腦洞回想一下，是不是哪里有文件打包進去沒有用到babel？？？
咦。。。。。。。是不是，。。那個。。。。node_modules下的依賴。。。。。
再仔細想想，看看代碼。。。。。有一個animejs（用于動效）、還有一個vue-particles （canvas用于登錄頁背景特效）
找到問題了，下一步就是如何顯示的把node_modules下的依賴用babel 轉譯。
樓主用的vue-cli3腳手架，翻山越嶺的查找vue-cli3的官方資料，終于找到你。。。。。
transpileDependencies Type: Array<string | RegExp> Default: []
默認情況下 babel-loader 會忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式轉譯一個依賴，可以在這個選項中列出來。
還好我沒放棄~~~~
transpiledependencies參數接受一個數組，數組里可以是字符串也可以正則表達式。
附上樓主的配置
transpileDependencies: [
'vue-particles',
'animejs'
],
完美解決~
開開心心下班回家~~~~~
2020年06月11日08:57:07 更新
樓主已棄用 uglifyjs-webpack-plugin 插件啦?，F(xiàn)在用的是 terser-webpack-plugin
以上這篇vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報錯的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
electron?vue?模仿qq登錄界面功能實現(xiàn)
這篇文章主要介紹了electron?vue?模仿qq登錄界面,首先使用vuecli創(chuàng)建vue項目，安裝electron，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue-router的使用方法及含參數的配置方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue中mapMutations傳遞參數方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中echarts引入中國地圖的案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue a標簽點擊實現(xiàn)賦值方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue Router之router.push和router.resolve頁面跳轉方式
這篇文章主要介紹了Vue Router之router.push和router.resolve頁面跳轉方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要為大家詳細介紹了vue-pdf實現(xiàn)文件在線預覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
VUE Error: getaddrinfo ENOTFOUND localhost
這篇文章主要介紹了VUE Error: getaddrinfo ENOTFOUND localhost，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue中使用Cesium加載shp文件、wms服務、WMTS服務問題
這篇文章主要介紹了vue中使用Cesium加載shp文件、wms服務、WMTS服務問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue-cli3開發(fā)Chrome插件實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05