In this subsection, we are going to install BabelMinifyWebpackPlugin. This plugin is designed to minify Babel script. Minifying, as previously discussed, refers to the removal of erroneous or surplus code to compress the application size. To use babel-loader and include minify as a preset, use babel-minify. The use of babel-loader with this plugin will be much faster and will operate on smaller file sizes.

Loaders in Webpack operate on single files and the preset of minify will execute each file directly in the browser's global scope; this is done by default. Some things in the top-level scope will not be optimized. Optimization of the topLevel scope of the file can be done using the following code and minifyOptions:

mangle: {
topLevel: true
}

When node_modles is excluded from the run through babel-loader, then the minify optimizations are not applied to the excluded files since nothing is passed through minifer.

When using babel-loader, the generated code does not go through the loader and is not optimized.

A plugin can operate on the entire chunk or bundle output and can optimize the whole bundle, and some differences can be seen in the minified output; however, in that case, the file size would be huge.

The Babel plugin is very useful when working with Webpack and it works across multiple platforms. The next plugin we will discuss is CommonsChunkPlugin, which is designed to work with multiple module chunks—again, something that is very native to Webpack.