How to use uglifyjs to minify and compress css/scss in webpack/vue cli?

Question

I have vue application with the cli. I want to use uglifyjs plugin.

So I add this code to my vue.config.js:

configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            parse: {},
            compress: {},
            mangle: true, // Note `mangle.properties` is `false` by default.
            output: null,
            toplevel: false,
            nameCache: null,
            ie8: false,
            keep_fnames: false,
         },
     }),
  ],
},

I want to compress all the css that exist in *.scss and *.vue files. How to configure UglifyJsPlugin to compress and minify? for example, I have this selector: .some-thing the output should be: .x.

Here what is not working:

app.vue

<template>
  <div class="some">appp</div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style lang="scss" scoped>
 .some { border:1px solid red;}
</style>

I run this command (which vue cli build):

npm run build (for production).

My full vue.config.js:

const merge = require('lodash/merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {

  css: {
    loaderOptions: {
      sass: {
        prependData: `
              @import "~@/sass/mixins.scss";
            `,
      },
    },
  },

  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            parse: {},
            compress: {},
            mangle: true, // Note `mangle.properties` is `false` by default.
            output: null,
            toplevel: false,
            nameCache: null,
            ie8: false,
            keep_fnames: false,
          },
        }),
      ],
    },
  },

};

The css/app.css is with the following content:

.some[..] {border:1px solid red;}...

** Edit ** After @Tony Ngo answer:

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {

  css: {
    loaderOptions: {
      sass: {
        prependData: `
              @import "~@/sass/mixins.scss";
            `,
      },
    },
  },

  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: false,
          extractComments: 'all',
          uglifyOptions: {
            compress: true,
            output: null,
          },
        }),
        new OptimizeCSSAssetsPlugin({
          cssProcessorOptions: {
            safe: true,
            discardComments: {
              removeAll: true,
            },
          },
        }),
      ],
    },
    plugins: [
      new CompressionPlugin({
        test: /\.(js|css)/,
      }),
      new UglifyJsPlugin(),
    ],
  },

  chainWebpack: (config) => {
    // nothing here yet
  },
};

Still .some is in my app.css bundle. I want to minify and compress so I expect to something like .x

Tony · Accepted Answer · 2020-03-16 08:37:20Z

You can view my full code here

Here is the base setup you will need to uglify your code

module.exports = {
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false,
                extractComments: 'all',
                uglifyOptions: {
                    compress: true,
                    output: null
                }
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    safe: true,
                    discardComments: {
                        removeAll: true,
                    },
                },
            })
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        new CompressionPlugin({
            test: /\.(js|css)/
        }),
        new UglifyJsPlugin(),
    ],
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }
};

Well, I did as you say. but when I open the app.css I still see .some class. if it helps - I can edit my question to my new vue.config.js

Collectives™ on Stack Overflow

How to use uglifyjs to minify and compress css/scss in webpack/vue cli?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related