How could i disable UglifyJs in the client webpack config?

[kartojal]

Hi,

I'm using Nuxt for my current project and it's working kite well, but today got a problem trying to running it at production.

How could i disable the Uglify plugin when the NODE_ENV is production?

I'm trying to use Babili for minify code because my code is in ES6-ES7 and uglify does not support it for now. But it keeps calling the uglify plugin, throwing code 1 error and stopping the build. The only workarounds i know is set the NODE_ENV in developtment (not recommended) or code in ES2015.

Thanks.

_{This question is available on Nuxt.js community (#c216)}

[kartojal]

Since the Uglify plugin is hardcoded in the nuxt lib when the NODE_ENV is not "developtment" (as much as i know), a workaround could be extending the webpack config, iterate the webpack plugins, and push again all plugins less the plugin with class name UglifyJsPlugin.

It works now, but if in the future the js minifier changes, will break.

File nuxt.config.js

{
...
  build: {
    vendor: ['axios'],
    babel: {
      plugins: [
        'transform-async-to-generator',
        'transform-runtime',
        'transform-object-rest-spread',
      ],
      presets: [
        'latest',
      ],
      env: {
        production: {
          presets: ['babili'],
        },
      },
    },
    extend(config, { isDev, isClient }) {
      if (isClient) {
        config.plugins = config.plugins.reduce((finalConfig, value) => {
          const constructorName = value.constructor.name;
          if (constructorName !== 'UglifyJsPlugin') {
            return [
              ...finalConfig,
              ...[value],
            ];
          }
          return finalConfig;
        }, []);
      }
    },
  }

Any better solution? Could be good to add a new argument to nuxt build for replacing the default minifier plugin ?

[atinux]

Hi @kartojal

I don't think an option will be useful since you can disable it in one line:

module.exports = {
  build: {
    extend (config) {
      config.plugins = config.plugins.filter((plugin) => plugin.constructor.name !== 'UglifyJsPlugin')
    }
  }
}

[CoreyCole]

Sorry to hijack this thread, I've arrived from google 😕 @atinux sorry I'm very new to webpack, I'm trying to use webpack as a typescript compiler that bundles together my node_modules depedencies. My javascript is not meant for a small-as-possible web application, it is going to be deployed and run in aws lambda. When I try adding your plugin filter to my webpack config, I get an error stating that build is not a valid property:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'build'. These properties are valid:
   object { mode?, amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, module?, name?, node?, output?, optimization?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           build: …
         }
       })
     ]

Does this same build you're referring to now live in options.build? (I'm on the latest webpack 4.6.0)

[CoreyCole]

Solved my issue- I was using the wrong tools. serverless webpack is what I needed for anyone else arriving here from google.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.