How to use terser-webpack-plugin - 10 common examples

export function watchWebpack (fixture, { output, plugins, context, ...config } = {}) {
  context = context || path.resolve(__dirname, 'fixtures', fixture);
  const compiler = webpack({
    mode: 'production',
    context,
    entry: './entry.js',
    output: {
      publicPath: 'dist/',
      path: path.resolve(context, 'dist'),
      ...(output || {})
    },
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            mangle: false,
            output: {
              beautify: true
            }
          },
          sourceMap: false
        })
      ]
    },
    plugins: plugins || []
  });
  // compiler.watch({});
  compiler.doRun = () => run(compiler.run.bind(compiler));
  return compiler;
}

target: 'node',
    node: false
  };

  if (options.optimization) {
    webpackConfig.optimization = {
      minimize: false,
      concatenateModules: false
    };
  }

  if (options.obfuscate) {
    const obfuscationOptimization = {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          chunkFilter: (chunk) => {
            // Exclude uglification for the `vendor` chunk
            if (chunk.name === 'vendor') {
              return false;
            }
  
            return true;
          },
          parallel: true,
          terserOptions: {
            mangle: true,
            keep_fnames: false,
            toplevel: true,
          }
        }),
      ],

hints: 'warning',
      },
      optimization: {
        removeAvailableModules: true,
        splitChunks: {
          // don't generate names for long term caching
          // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
          name: false,
        },
        minimize: true,
        minimizer: [
          // minimize CSS
          new OptimizeCSSAssetsPlugin({}),

          // minimize JS
          new TerserPlugin({
            parallel: true,
            cache: true,

            // preserve LICENSE comments (*!, /**!, @preserve or @license) for legal stuff but extract them
            // to their own file to reduce bundle size.
            extractComments: true,

            terserOptions: {
              compress: {
                warnings: false,

                // TODO set to 6/7/8 if .browserlistrc supports it
                // Will use newer features to optimize
                ecma: 5,
              },

const config: any = {
    splitChunks: {
      cacheGroups: {
        default: false,
        vendors: false
      }
    }
  }

  if (dev) {
    return config
  }

  // Terser is a better uglifier
  config.minimizer = [new TerserPlugin({
    parallel: true,
    sourceMap: false,
    cache: true
  })]

  // Only enabled in production
  // This logic will create a commons bundle
  // with modules that are used in 50% of all pages
  config.splitChunks.chunks = 'all'
  config.splitChunks.cacheGroups.commons = {
    name: 'commons',
    chunks: 'all',
    minChunks: totalPages > 2 ? totalPages * 0.5 : 2
  }

  return config

headers: {
        'Service-Worker-Allowed': '/',
      },
      historyApiFallback: true,
      hot: true,
      port, // This can be a unix socket path so a string is valid
      watchOptions: {
        ignored: /node_modules/,
      },
    },

    optimization: {
      runtimeChunk: 'single',
      minimize: PROD,
      minimizer: [
        new TerserPlugin({
          sourceMap: sourceMaps,
        }),
      ],
    },

    performance: false,

    stats: !PROD,
  };
}

resolve(process.cwd(), '..', '..', 'node_modules'), // Lerna monorepo
        process.cwd(),
        'node_modules'
      ],
      extensions: ['.js', '.json']
    },
    devtool: isDevelopment ? 'inline-cheap-module-source-map' : 'none',
    stats: 'errors-only',
    plugins: [
      new webpack.EnvironmentPlugin({
        NODE_ENV: mode
      })
    ],
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            output: {
              comments: false
            }
          },
          extractComments: false
        })
      ]
    }
  }
}

function optimized(config) {
  return webpackMerge(
    {
      mode: 'production',
      optimization: {
        minimizer: [
          new TerserPlugin({
            // Apply the same logic used to calculate the
            // threadLoaderPool workers number to spawn
            // the parallel processes on terser
            parallel: config.threadLoaderPoolConfig.workers,
            sourceMap: false,
            terserOptions: {
              compress: {
                // The following is required for dead-code the removal
                // check in React DevTools
                //
                // default
                unused: true,
                dead_code: true,
                conditionals: true,
                evaluate: true,

function createWebpackConfig(env, entries) {
  const { development, sourceFilePattern, buildDirs } = config;
  const preset = { client: "browser", server: "node" }[env];

  const webpackConfig = {
    mode: development ? "development" : "production",
    devtool: development ? "eval-source-map" : false,
    entry: entries[env],
    output: {
      filename: "[chunkhash].js",
      path: resolve(buildDirs[env]),
    },
    optimization: {
      minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()],
      usedExports: true,
      splitChunks: {
        chunks: "all",
      },
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: "[contenthash].css",
      }),
    ],
    module: {
      rules: [
        {
          test: file => file.endsWith(".css"),
          use: [
            {

compiler =>
            new TerserPlugin({
              cache: true,
              sourceMap: sourcemaps,
              terserOptions: {
                mangle: !!mangle,
              },
            }).apply(compiler),
        ],

function shouldOptimize({ optimize = false }) {
    if (optimize) {
        return {
            minimizer: [new TerserPlugin({
                terserOptions: {
                    mangle: true,
                    sourceMap: true,
                },
            })],
        };
    }
}