Use latest terser-webpack-plugin with Webpack5

Question

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?

user_1488200 · Answer

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

user_5383615 · Answer

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

Use latest terser-webpack-plugin with Webpack5

2 Answers