CODEWITHSUNDEEP
javascriptnode.jswebpackwebpack-5
user3587624
user3587624

Reputation: 1471

Use latest terser-webpack-plugin with Webpack5

According to this link (Terser documentation) if you are using latest Webpack 5, you don't need to install the Terser plugin as it is included in Webpack 5 out of the box. However, I am having a hard time to get this working.

If I remove the terser-webpack-plugin from my packages.json file and I try to use it like this (see below webpack.production.js), I get build errors like this:

[webpack-cli] Failed to load 'D:\Project\React\MyApp\config\webpack.production.js' config

[webpack-cli] Error: Cannot find module 'terser-webpack-plugin'

webpack.production.js

const TerserPlugin = require('terser-webpack-plugin');
const webpack = require('webpack');
const { merge } = require('webpack-merge');

module.exports = merge(commonCfg, {
        ......
        optimization: {
            minimize: true,
            minimizer: [new TerserPlugin({
                cache: false,
                parallel: false,
                sourceMap: true,
            })]
        },

Now, if I include the latest terser-webpack-plugin version (5.1.1) on my package.json and run my build, I get the following error message:

[webpack-cli] Failed to load 'D:\Project\React\MyApp\config\webpack.production.js' config

[webpack-cli] Invalid options object. Terser Plugin has been initialized using an options object that does not match the API schema.

  • options has an unknown property 'sourceMap'. These properties are valid: object { test?, include?, exclude?, terserOptions?, extractComments?, parallel?, minify? }

The only way I can make this work is keeping terser-webpack-plugin on version 4.2.X.

Is there a way I can make this work with latest Terser version? Or maybe I misunderstood the documentation?

Upvotes: 23

Views: 40881

Answers (3)

Rainbowvs
Rainbowvs

Reputation: 1

Just add '...' to the minimizer array. As stated by the WebPack documentation:

Answer from webpack doc

Upvotes: 0

Arian Al Lami
Arian Al Lami

Reputation: 937

Hi here is how i resolved the Terserof Webpack 5

Before Webpack 5:

minimizer: [
  new TerserPlugin({
    terserOptions: {
      mangle: {
        compress: {},
      },
    }
  })
]

After Webpack 5:

minimizer: [
  (compiler) => {
    const TerserPlugin = require('terser-webpack-plugin');
    new TerserPlugin({
      terserOptions: {
        compress: {},
      }
    }).apply(compiler);
  },
]

you can read more about it here https://webpack.js.org/configuration/optimization/ and to check the terser option check this url https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions

here is link to my article with more migration error problem solved https://medium.com/@arianpopalyar/webpack-4-to-webpack-5-migration-9bc683d2bc72

Upvotes: 13

nikunj pansuriya
nikunj pansuriya

Reputation: 87

I have tried the below configuration with webpack version 5.25.0, no need install terser-webpack-plugin and it's worked for me.

 optimization: {
   minimizer: [(compiler) => {
    return () => {
     return {
      terserOptions: {
        mangle: {
          reserved: ['Td', 'Tr', 'Th', 'Thead']
        }
      }
     }
    }
  }]
 }

Upvotes: 4

Related Questions