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