[Vuejs]-Minification of vue project

0👍

I have realised what i did wrong:

  • it’s worth to check webpack –version ( I had old one sudo apt get install webpack installed me 3.6.4 version on Ubuntu 19.04)
  • I was trying use vue.config.js which wrapps webpack and this was not good idea something didnt work for me
  • finally I’ve configured webpack.config.js for vue + vuetify which looks like this:
const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const TerserPlugin = require('terser-webpack-plugin');
const JavaScriptObfuscator = require('webpack-obfuscator');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname,
        '../monitglass-backend/src/main/resources/static/js/app'),
    publicPath: '/dist/',
    filename: 'app.js'
  },
  plugins: [new VueLoaderPlugin()
    , new VuetifyLoaderPlugin()
    , new TerserPlugin()
    , new JavaScriptObfuscator({
      identifierNamesGenerator: 'mangled'
    })
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {}
          // other vue-loader options go here
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg|ttf|eot|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
              fiber: require('fibers'),
              indentedSyntax: true // optional
            }
          }
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          ecma: undefined,
          warnings: false,
          parse: {},
          compress: {},
          mangle: true, // Note `mangle.properties` is `false` by default.
          module: false,
          output: null,
          toplevel: false,
          nameCache: null,
          ie8: false,
          keep_classnames: undefined,
          keep_fnames: false,
          safari10: false,
        },
      }),
    ],
  },
}

So on the end of the day I’m finishing with app.js 3.82 MiB minified and obfuscated. I hope this post will help others who will look for such answer.

Leave a comment