Nuxt.js: How could i disable UglifyJs in the client webpack config?

Created on 13 Feb 2017 · 5Comments · Source: nuxt/nuxt.js

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)}

question

Source

kartojal

Most helpful comment

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')
    }
  }
}

Atinux on 17 Feb 2017

👍18 🎉7

All 5 comments

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 ?

kartojal on 13 Feb 2017

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')
    }
  }
}

Atinux on 17 Feb 2017

👍18 🎉7

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)