如何使用 TerserPlugin 和 webpack-encore 进行压缩

Question

With this webpack.config.js that use webpack-encore, and minify with terser, I can compile successfully, but absolutely nothing is minified at all. Comments, and full variable names, are still there.

var Encore = require('@symfony/webpack-encore');

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

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    // the public path used by the web server to access the previous directory
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableReactPreset()
    .enableSassLoader()
    .enableLessLoader()
    .autoProvidejQuery()
    .disableSingleRuntimeChunk()

     .addEntry('app_prescription', [
         './assets/js/prescription/app_prescription.js'
     ])



    .addLoader({
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader?cacheDirectory"
    })

;


if( Encore.isProduction() ) {
    Encore.addPlugin(new TerserPlugin({parallel: true,cache:true}) );
}

module.exports = function(env) {

    Encore.enableVersioning();
    const config = Encore.getWebpackConfig() ;

    if( Encore.isProduction() ) {

        config.optimization = {
            minimizer: [new TerserPlugin({parallel: true,cache:true})]
        }
    }



    return config ;
}

What is wrong with this code?

Answer 1

Late answer for everyone who stumbles upon this in 2021 and later:

Use encore's configureTerserPlugin method:

 Encore.configureTerserPlugin((options) => {
     options.cache = true;
     options.terserOptions = {
         output: {
             comments: false
         }
     }
 })

Answer 2

Accordingly to https://github.com/webpack-contrib/terser-webpack-plugin#extractcomments to avoid generating *.LICENSE.txt files you should use this option of method:

Encore.configureTerserPlugin(options => {
    options.extractComments = false;
});

Answer 3

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

Encore.configureTerserPlugin((options) => {
    options.extractComments = false;
    options.terserOptions = {
        output: {
            comments: false,
        },
    };
});

// Minify code
const optimization = {
    minimize: true,
    minimizer: [
        new TerserPlugin(),
    ],
}

... // other encore code in here

module.exports = {
    ...Encore.getWebpackConfig(),
    name: config.name,
    optimization,
};