obfuscate code with laravel mix

Question

I have a web app with laravel and vuejs. I use laravel-mix and in my webpack.mix.js i have:

const { mix } = require('laravel-mix');
mix.sourceMaps();
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

now I would obfuscate code, so all my components, how can I do this with laravel-mix?

Answer 1

npm run dev will NOT uglify / minify your code, but npm run production WILL.

If you are looking to use uglify...

laravel mix is just a wrapper around webpack. So you can install the UglifyWepackPlugin here https://webpack.js.org/plugins/uglifyjs-webpack-plugin/

Afterwards, you can edit your mix.webpackConfig to use the plugin, as detailed here: https://laravel.com/docs/5.5/mix#custom-webpack-configuration

Answer 2

Install https://github.com/javascript-obfuscator/javascript-obfuscator and https://github.com/javascript-obfuscator/webpack-obfuscator. After that you need to include de plugin in the webpack configuration, you can do that adding the next code in webpack.mix.js file.

let mix = require('laravel-mix');
let JavaScriptObfuscator = require('webpack-obfuscator');

mix.webpackConfig({
    plugins: [
        new JavaScriptObfuscator ({
            rotateUnicodeArray: true
        }, ['excluded_bundle_name.js'])
    ],
});

mix.js('resources/assets/js/app.js', 'public/js');

After that all your js files will be obfuscater.