当前位置：网站首页>Webpack packaging Vue project adds confusion to solve the cache problem

Webpack packaging Vue project adds confusion to solve the cache problem

2022-07-27 04:19:00 【Hide roses on your back】

Method 1

Add dependency

npm i --save uglifyjs-webpack-plugin

vue.config.js Introduce methods

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

First, set the environment variables

Set... In the script
NODE_ENV=development Test environment
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"
},

Set up vue.config.js To configure

Function mode
configureWebpack: (config) => {
console.log(process.env.NODE_ENV);
if (process.env.NODE_ENV == "production") {
// Package each dependency package as a separate js file
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"),
},
};
}
},

Object mode
configureWebpack: {
plugins: [ new JavaScriptObfuscator({ rotateStringArray: true, }, []) ],
resolve: {
alias: {
"@": resolve("src"),
},
},
},

Method 2

Add dependency

npm i [email protected] -D

vue.config.js To configure

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

Method 3

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'])
]
};