当前位置：网站首页>webpack打包vue项目添加混淆方式，解决缓存问题

webpack打包vue项目添加混淆方式，解决缓存问题

2022-07-27 03:03:00 【背藏玫瑰】

方法一

添加依赖

npm i --save uglifyjs-webpack-plugin

vue.config.js引入方法

const UglifyPlugin = require("uglifyjs-webpack-plugin");

首先设置环境变量

在脚本中设置
NODE_ENV=development 测试环境
cross-env NODE_ENV=development vue-cli-service serve

"scripts": {
"serve": "cross-env NODE_ENV=development vue-cli-service serve",
"v1": "cross-env NODE_ENV=development vue-cli-service serve --mode v1",
"wis": "cross-env NODE_ENV=development vue-cli-service serve --mode wis",
"build": "cross-env NODE_ENV=production vue-cli-service build",
"build:wis": "cross-env NODE_ENV=production vue-cli-service build --mode wis",
"build:v1": "cross-env NODE_ENV=production vue-cli-service build -mode v1",
"lint": "vue-cli-service lint"
},

设置vue.config.js配置

函数方式
configureWebpack: (config) => {
console.log(process.env.NODE_ENV);
if (process.env.NODE_ENV == "production") {
// 将每个依赖包打包成单独的js文件
let optimization = {
minimizer: [
new UglifyPlugin({
uglifyOptions: {
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ["console.log"],
},
},
}),
],
};
Object.assign(config, {
optimization,
});
config.resolve = {
...config.resolve,
alias: {
"@": resolve("src"),
},
};
}
},

对象方式
configureWebpack: {
plugins: [ new JavaScriptObfuscator({ rotateStringArray: true, }, []) ]，
resolve: {
alias: {
"@": resolve("src"),
},
},
},

方法二

添加依赖

npm i [email protected] -D

vue.config.js配置

const TerserPlugin = require('terser-webpack-plugin')
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(new TerserPlugin())
}
}

方法三

const JavaScriptObfuscator = require('webpack-obfuscator');
module.exports = {
entry: {
'mian1': './index1.js',
'main2': './index2.js'
},
output: {
path: 'dist',
filename: '[name].js'
},
plugins: [
new JavaScriptObfuscator({
rotateUnicodeArray: true
}, ['main2.js'])
]
};