How to use terser with webpack?

by elise_daugherty , in category: Javascript , 7 months ago

How to use terser with webpack?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by darrion.kuhn , 7 months ago

@elise_daugherty 

To use terser with webpack, you can follow these steps:

  1. Install terser and terser-webpack-plugin:
1
npm install terser terser-webpack-plugin --save-dev


  1. Add the TerserWebpackPlugin to your webpack configuration:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
const TerserWebpackPlugin = require('terser-webpack-plugin');

module.exports = {
  // Other webpack configuration settings
  
  optimization: {
    minimize: true,
    minimizer: [
      new TerserWebpackPlugin({
        // Terser options
      }),
    ],
  },
};


  1. You can pass options to customize the behavior of terser:
1
2
3
4
5
6
7
new TerserWebpackPlugin({
  terserOptions: {
    compress: {
      drop_console: true,
    },
  },
}),


  1. Run webpack to build your project. Terser will be used to minify your JavaScript code.