I have a webpack project with a few js files:
package.json
...
"scripts": {
"dev": "webpack --config webpack.dev.js",
"watch": "webpack --config webpack.dev.js --watch",
"build": "webpack --config webpack.prod.js"
},
...
webpack.prod.js
...
entry: {
portal: `${portalDir}assets/js/portal.js`,
branding: `${portalDir}assets/js/branding.js`,
},
externals: {
jquery: 'jQuery',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, `${portalDir}dist/js`),
clean: true,
},
performance: {hints: false,},
...
portal.js
function demofunction(){console.log("demo");}
function demofunction2(){console.log("demo2");}
branding.js
function brandingfunction1(){console.log("br");}
function brandingfunction2(){console.log("br2");}
when i use the command
npm run build
this command generate the files dist/js/portal.js and dist/js/branding.js but the code it's obfuscated or something, i want a builded file like:
portal.js
function demofunction(){console.log("demo");} function demofunction2(){console.log("demo2");}
The code is only minified but the result using npm run build generate something like:
(()=>{var e={};function t(e,t){....};})
Is there any way to only minify the js code? i try using:
optimization: {
minimize: true,
minimizer: [new TerserPlugin({
terserOptions: {
compress: false,
mangle: true,
module: true,
}
})],
},
in webpack.prod.js but it doesn't work.