uglifyOptions config is not working in webpack 5

[goforu]

Describe the bug In quasar.conf.js file, I use uglifyOptions to drop console log in production, but since I upgraded to webpack 5, it's no longer working. There's my config:

build: {
      scopeHoisting: true,
      vueRouterMode: 'history', // available values: 'hash', 'history'
      showProgress: true,
      gzip: false,
      analyze: false,
      // drop console
      uglifyOptions: {
        compress: { pure_funcs: ['console.log'] }
      },
      extendWebpack (cfg) {
        if (cfg.output) {
          cfg.plugins.push(new CopyWebpackPlugin({
            patterns: [{ from: './wTFg6cBrWb.txt', to: cfg.output.path }, { from: './MP_verify_2fJZiZCzjBnVRnZ2.txt', to: cfg.output.path }]
          }))
        }
      },
      chainWebpack (chain) {
        const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
        chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin)
      }
    },

[goforu]

I tried to config in extendWebpack and chainWepack using terser plugin, but neither working...

const TerserPlugin = require('terser-webpack-plugin')
extendWebpack (cfg) {
        cfg.optimization.minimize = true
        cfg.optimization.minimizer.push(new TerserPlugin({
          extractComments: false,
          minify: TerserPlugin.uglifyJsMinify,
          terserOptions: {
            format: {
              comments: false,
            },
            compress: {
              drop_console: true,
            }
          }
        }))
}

chainWebpack (chain) {
        chain.optimization.minimizer('terser').use(TerserPlugin, [{
          terserOptions: {
            output: {
              comments: false
            },
            compress: {
              drop_console: true,
              drop_debugger: true,
              pure_funcs: ['console.log']
            }
          }
        }])
      }

[MilosPaunovic]

Have you tried with the:

uglifyOptions: {
   compress: {
      drop_console: true
   }
},

[goforu]

Have you tried with the:

uglifyOptions: {
   compress: {
      drop_console: true
   }
},

yes, I tried, no working either...

[MilosPaunovic]

Okay, in that case, please provide output of quasar info and the contents of your quasar.conf.js file so it can be debugged easier.

[goforu]

quasar info

Operating System - Darwin(20.6.0) - darwin/x64 NodeJs - 16.6.1

Global packages NPM - 7.20.3 yarn - 1.22.11 @quasar/cli - 1.0.5 @quasar/icongenie - 2.4.0 cordova - 10.0.0

Important local packages quasar - 2.2.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time @quasar/app - 3.1.8 -- Quasar Framework local CLI @quasar/extras - 1.11.4 -- Quasar Framework fonts, icons and animations eslint-plugin-quasar - 1.0.0 -- Official ESLint plugin for Quasar vue - 3.2.20 -- The progressive JavaScript framework for buiding modern web UI. vue-router - 4.0.12 vuex - 4.0.2 -- state management for Vue.js electron - 7.3.3 -- Build cross platform desktop apps with JavaScript, HTML, and CSS electron-packager - Not installed electron-builder - Not installed @babel/core - 7.15.5 -- Babel compiler core. webpack - 5.59.1 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff. webpack-dev-server - 4.4.0 -- Serves a webpack app. Updates the browser on changes. workbox-webpack-plugin - 6.3.0 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache. register-service-worker - 1.7.2 -- Script for registering service worker, with hooks typescript - 4.4.2 -- TypeScript is a language for application scale JavaScript development @capacitor/core - 3.2.5 -- Capacitor: Cross-platform apps with JavaScript and the web @capacitor/cli - 3.2.5 -- Capacitor: Cross-platform apps with JavaScript and the web @capacitor/android - 3.2.5 -- Capacitor: Cross-platform apps with JavaScript and the web @capacitor/ios - 3.2.5 -- Capacitor: Cross-platform apps with JavaScript and the web

Quasar App Extensions @quasar/quasar-app-extension-testing - 1.0.3 -- A Quasar App Extension for managing Test Harnesses @quasar/quasar-app-extension-testing-e2e-cypress - 1.0.0-beta.13 -- A Quasar App Extension for Cypress e2e @quasar/quasar-app-extension-testing-unit-jest - 3.0.0-alpha.4 -- A Quasar App Extension for running Jest tests

Networking Host - Joeys-MacBook-Pro.local en0 - 192.168.102.4

[goforu]

quasar.conf.js

// Configuration for your app
// https://quasar.dev/quasar-cli/quasar-conf-js
const CopyWebpackPlugin = require('copy-webpack-plugin')
// const TerserPlugin = require('terser-webpack-plugin')
// beta only
// const LOCAL_PATH = '/statics/beta/'
// const LOCAL_PATH = '/hsql/dist/spa/'
// const extraBuild = process.env.NODE_ENV === 'production'
//   ? {
//       appBase: '',
//       publicPath: LOCAL_PATH,
//       assetsDir: LOCAL_PATH
//     }
//   : {}
module.exports = function (ctx) {
  return {
    supportTS: true,
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://quasar.dev/quasar-cli/cli-documentation/boot-files
    boot: [
      // 'i18n',
      'init',
      'capacitor'
    ],

    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
    css: [
      'app.scss'
    ],

    // https://github.com/quasarframework/quasar/tree/dev/extras
    extras: [
      // 'ionicons-v4',
      // 'mdi-v4',
      'fontawesome-v5',
      // 'eva-icons',
      // 'themify',
      // 'line-awesome',
      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!

      // 'roboto-font', // optional, you are not bound to it
      'material-icons', // optional, you are not bound to it
      'material-icons-outlined',
      'eva-icons'
    ],

    // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
    framework: {
      iconSet: 'material-icons', // Quasar icon set
      lang: 'en-US', // Quasar language pack

      // Possible values for "all":
      // * 'auto' - Auto-import needed Quasar components & directives
      //            (slightly higher compile time; next to minimum bundle size; most convenient)
      // * false  - Manually specify what to import
      //            (fastest compile time; minimum bundle size; most tedious)
      // * true   - Import everything from Quasar
      //            (not treeshaking Quasar; biggest bundle size; convenient)
      all: 'auto',

      components: [
        'QAjaxBar',
        'QVideo'
      ],
      directives: [],

      // Quasar plugins
      plugins: [
        'Cookies',
        'Notify',
        'AppFullscreen',
        'Dialog'
        // 'Dialog'
      ],
      ripple: {
        early: true
      }
    },

    // https://quasar.dev/quasar-cli/cli-documentation/supporting-ie
    supportIE: false,

    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
    build: {
      scopeHoisting: true,
      vueRouterMode: 'history', // available values: 'hash', 'history'
      showProgress: true,
      gzip: false,
      analyze: false,
      // drop console
      uglifyOptions: {
        compress: {
          drop_console: true
        }
      },
      // Options below are automatically set depending on the env, set them if you want to override
      // preloadChunks: false,
      // extractCSS: false,
      // ...extraBuild,
      // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
      // publicPath: './',
      // appBase: '',
      extendWebpack (cfg) {
        if (cfg.output) {
          cfg.plugins.push(new CopyWebpackPlugin({
            patterns: [{ from: './wTFg6cBrWb.txt', to: cfg.output.path }, { from: './MP_verify_2fJZiZCzjBnVRnZ2.txt', to: cfg.output.path }]
          }))
        }
        // cfg.optimization.minimize = true
        // cfg.optimization.minimizer.push(new TerserPlugin({
        //   extractComments: false,
        //   minify: TerserPlugin.uglifyJsMinify,
        //   terserOptions: {
        //     format: {
        //       comments: false,
        //     },
        //     compress: {
        //       drop_console: true,
        //     }
        //   }
        // }))
        // cfg.module.rules.push({
        //   enforce: 'pre',
        //   test: /\.(js|vue)$/,
        //   loader: 'eslint-loader',
        //   exclude: /node_modules/,
        //   options: {
        //     formatter: require('eslint').CLIEngine.getFormatter('stylish')
        //   }
        // })
      },
      chainWebpack (chain) {
        // chain.optimization.minimizer('terser').use(TerserPlugin, [{
        //   terserOptions: {
        //     output: {
        //       comments: false
        //     },
        //     compress: {
        //       drop_console: true,
        //       drop_debugger: true,
        //       pure_funcs: ['console.log']
        //     }
        //   }
        // }])
        const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
        chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin)
        // process.env.NODE_ENV === 'production' && chain.output.publicPath('./')
        // return chain
      }
    },

    // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
    devServer: {
      host: '0.0.0.0',
      https: false,
      port: 80,
      open: true, // opens browser window automatically
      proxy: {
        // proxy all requests starting with /api to jsonplaceholder
        '/api': {
          // target: 'http://localhost:3002',
          target: 'http://101.34.136.209:3002',
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        }
      }
    },

    // animations: 'all', // --- includes all animations
    // https://quasar.dev/options/animations
    animations: [
      'fadeIn',
      'fadeOut',
      'flash',
      'pulse',
      'fadeInUp',
      'fadeOutLeft',
      'shakeY',
      'slideInUp',
      'slideInLeft',
      'slideInRight',
      'bounce',
      'shakeX',
      'jackInTheBox'
      // 'slideInLeft',
    ],

    // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
    ssr: {
      pwa: false
    },

    // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
    pwa: {
      workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
      workboxOptions: {
        skipWaiting: true,
        clientsClaim: true
      }, // only for GenerateSW
      manifest: {
        name: '话树趣聊',
        short_name: '趣聊',
        description: '搞笑对话收集站',
        display: 'standalone',
        orientation: 'portrait',
        background_color: '#ffffff',
        theme_color: '#027be3',
        icons: [
          {
            src: 'statics/icons/icon-128x128.png',
            sizes: '128x128',
            type: 'image/png'
          },
          {
            src: 'statics/icons/icon-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'statics/icons/icon-256x256.png',
            sizes: '256x256',
            type: 'image/png'
          },
          {
            src: 'statics/icons/icon-384x384.png',
            sizes: '384x384',
            type: 'image/png'
          },
          {
            src: 'statics/icons/icon-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    },

    // Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
    cordova: {
      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
      id: 'org.cordova.quasar.app'
    },

    // Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
    capacitor: {
      hideSplashscreen: true
    },

    // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
    electron: {
      bundler: 'packager', // 'packager' or 'builder'

      packager: {
        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options

        // OS X / Mac App Store
        // appBundleId: '',
        // appCategoryType: '',
        // osxSign: '',
        // protocol: 'myapp://path',

        // Windows only
        // win32metadata: { ... }
      },

      builder: {
        // https://www.electron.build/configuration/configuration

        appId: 'chatflow'
      },

      // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
      nodeIntegration: true,

      extendWebpack (cfg) {
        // do something with Electron main process Webpack cfg
        // chainWebpack also available besides this extendWebpack
      }
    }
  }
}

[rstoenescu]

Hi,

Cannot reproduce. Applied quasar.conf > build > uglifyOptions:

uglifyOptions: {
        compress: {
          drop_console: true
        }
      },

Added a console.info('...') somewhere in src. Then built for production and the console.info() instruction was indeed removed.

---

Also noticed something wrong with your quasar.conf. There's a ripple: { early: true } but that should be under the:

framework: {
  config: {
     ripple: ....

Furthermore, quasar.conf > framework > "all" prop has been removed long time ago and has no purpose nowadays.

---

Might be worth checking out the quasar.conf.js settings again. https://quasar.dev/quasar-cli/quasar-conf-js#property-framework

[goforu]

THANKS for your detailed information, appreciated!!! After hours of debugging, I finally found where the problem is.

My project has the dependency node-polyfill-webpack-plugin for crypto lib. When I run quasar build, it will firstly transcript console to random letter such as

Y.info('drop test')

In that case, Uglify can't find console key words to drop, as a result issue remains.

So my following question is How can I set minimizer work before node-polyfill-webpack-plugin

[goforu]

Here is my solution, hoping to help people needed. Adding excludeAliases to tell Ployfill ignore console.

const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin, [{ excludeAliases: ['console'] }])