Run webpack optimizations only in `prod` mode

Question

I have implemented a webpack project where the I use TerserPlugin as the optimizer in webpack. When I run the webpack-dev-server using the following command, I see in my terminal, the terser optimization happening even in the development mode.

"start": "run-script-os",
"start:win32": "..\\..\\node_modules\\.bin\\webpack-dev-server --env.NODE_ENV=local --mode development --inline --hot --open",
"start:default": "../../node_modules/.bin/webpack-dev-server --env.NODE_ENV=local --mode development --inline --hot --open",

Conolse Output

[WDS] 92% - chunk asset optimization.
[WDS] 92% - chunk asset optimization (TerserPlugin).
[WDS] 93% - after chunk asset optimization.
[WDS] 93% - after chunk asset optimization (SourceMapDevToolPlugin).
[WDS] 93% - asset optimization.
[WDS] 94% - after asset optimization.
[WDS] 94% - after seal.
[WDS] 95% - emitting.

webpack config on optimizer option

optimization: {
    minimize: true,
    nodeEnv: 'production',
    minimizer: [
        new TaserJSPlugin({
             terserOptions: {
                 keep_fnames: true
             }
        })
    ]
}

What is the proper way of running the dev-server in development mode, with optimizations switched off? since It's only in dev mode, I wouldn't need to minify the code.

The reason behind this approach is that the [WDS] 92% - chunk asset optimization (TerserPlugin). step takes a bit of a time to complete hence I have to wait till it finishes. Any thoughts on this?

Answer 1

Conditionally add what optimizations you want. In the following code when NODE_ENV is set to production only then the TaserJSPlugin will be used for the build.

const isProd = process.env.NODE_ENV === 'production';

...

minimizer: [
    isProd && new TaserJSPlugin({
         terserOptions: {
             keep_fnames: true
         }
    })
].filter(Boolean)
...

Note that webpack may through an error if there's any invalid value present in the array. So we filter it out.