之前有講到怎么去多環(huán)境打包缸兔，但是在打包完之后發(fā)現(xiàn)一個(gè)問(wèn)題。
不打包map文件吧吹艇，那就是真 · 源碼惰蜜；打包吧，map文件里也是什么都有受神，在一波絕望之后選擇加入代碼混淆的插件抛猖，不求別的，只要我的注釋和log不在就行鼻听。
接下來(lái)就來(lái)介紹在Vue-cli3中财著， uglifyjs-webpack-plugin的使用
話不多說(shuō)，安裝插件先
npm i --save uglifyjs-webpack-plugin
接下來(lái)撑碴，配置文件還是寫(xiě)在vue.config.js中
configureWebpack: (config) => {
// 引入uglifyjs-webpack-plugin
let UglifyPlugin = require('uglifyjs-webpack-plugin');
if (process.env.NODE_ENV == 'production') {
// 為生產(chǎn)環(huán)境修改配置
config.mode = 'production'
// 將每個(gè)依賴包打包成單獨(dú)的js文件
let optimization = {
minimizer: [new UglifyPlugin({
uglifyOptions: {
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']
}
}
})]
}
Object.assign(config, {
optimization
})
} else {
// 為開(kāi)發(fā)環(huán)境修改配置
config.mode = 'development'
}
}
還有一個(gè)問(wèn)題撑教，需要壓縮的代碼是需要有map文件才可以的喲！
如果是多環(huán)境打包的話醉拓，.env文件中的NODE_ENV需要固定名稱的伟姐。
NODE_ENV = 'production'
這個(gè)，感覺(jué)很投機(jī)取巧的一個(gè)配置廉嚼，如果需要名稱的話玫镐，自己在下面定義字段去保存咯哪亿，這里的標(biāo)識(shí)是要作為打包時(shí)vue對(duì)生產(chǎn)環(huán)境的判斷抒抬。在dev開(kāi)發(fā)環(huán)境打包時(shí)嗜憔，vue默認(rèn)不會(huì)打包map文件的。
這個(gè)作為一個(gè)小小的問(wèn)題提一下傍念，當(dāng)然如果哪位大佬有更好的解決方案矫夷，可以留在評(píng)論區(qū)喲。
唔憋槐，就是這么簡(jiǎn)單双藕，引入插件，寫(xiě)上配置阳仔，重啟項(xiàng)目打包忧陪，結(jié)束。
配置方式都是來(lái)自其他大佬喲近范，文章都是作為填坑記錄來(lái)方便使用的嘶摊，有問(wèn)題的話，求輕噴ヽ(^_?)?
