7 Webpack plugins for your next React app
Tags: webpack, react, javascript
Published: 2019-04-26 13:11:23

_original post @ [Linguine Blog](https://linguinecode.com/post/top-webpack-plugins)_

## Webpack optimization

Webpack comes with a configuration property called **optimization**.

Inside **optimization** another property named **minimize**, and **minimizer**.

If **minimize** equals true, then everything inside **minimizer** will trigger.

<div class="wp-block-image">

<figure class="aligncenter">![Webpack optimize property](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/18191438/webpack-optimization-prop.png)</figure>

</div>

The next couple of Webpack plugins that I will cover, they should be inside the **minimizer** property.

### **Terser webpack plugin**

The Terser plugin is a great tool to minimize the application JavaScript bundle file for production.

Another plus to this plugin is that it supports ES6+.

Here is a basic configuration for Terser.

<figure class="wp-block-image">![Terser webpack plugin basic configuration](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/18191112/webpack-terser-example-1024x1021.png)</figure>

Source: [Terser plugin](https://webpack.js.org/plugins/terser-webpack-plugin/)

### **Optimize CSS assets Webpack plugin**

The Optimize CSS assets Webpack plugin is another one for production build.

It helps optimize and minimize your React CSS code.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/18192425/optimize-css-assets-webpack-plugin-1024x509.png)</figure>

Source: [Optimize css assets plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)

## Webpack plugins

### **HTML Webpack plugin**

The HTML Webpack plugin is a handy plugin for both development and production build.

It tells Webpack to generate an HTML file and inject a script tag with the JavaScript code.

All you need to do is supply the HTML template to use.

<figure class="wp-block-image">![HTML webpack plugin basic configuration](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/18192942/html-webpack-plugin-configuration.png)</figure>

You may also add minification rules such as removing comments, minifying the CSS, and JavaScript.

But if you’d like to only use the minify property for build you can do something like.

<figure class="wp-block-image">![Mnify HTML webpack plugin only for production](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/23142733/webpack-html-plugin-prod1-780x1024.png)</figure>

Source: [HTML Webpack plugin](https://github.com/jantimon/html-webpack-plugin)

### **Webpack Define plugin**

This plugin comes with the Webpack node module, and it’s a handy little tool when developing your React application.

The DefinePlugin allows you to create environment variables and makes it accessible to your JavaScript code.

<figure class="wp-block-image">![Webpack DefinePlugin basic use](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/23141654/webpack-define-plugin-1024x440.png)</figure>

Source: [Webpack DefinePlugin](https://webpack.js.org/plugins/define-plugin/)

### Mini CSS Extract plugin

This plugin is another great production tool.

It allows your to extract the CSS in your React app into separate files per JavaScript file.

Some other features that are enjoyable versus the Extract Text Webpack plugin is:

*   Async loading
*   No duplicate compilation
*   Easier to use

<figure class="wp-block-image">![Mini CSS extract plugin webpack configuration](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/23143456/mini-css-extract-config-1024x393.png)</figure>

## Webpack modules

### **Babel loader**

This plugin allows you to write the latest generation of JavaScript and converts it to a compiled ES5 version.

<figure class="wp-block-image">![Babel ES6 feature to transpiled version](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/23161010/babel-example.png)</figure>

Now to configure babel-loader for .js, .jsx, and as well for Typescript (if you’re using it).

<figure class="wp-block-image">![Webpack babel loader configration](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/23161503/babel-loader-config.png)</figure>

Source: [Babel loader](https://github.com/babel/babel-loader)

### **Babel preset react app**

This module is maintained by the Create React App team and it has a great set of presets for your React App.

All we need to do is add more to the babel loader configuration.

<figure class="wp-block-image">![Babel loader configuration with react presets](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/23162057/babel-loader-config-with-react-presets-1024x490.png)</figure>

Source: [Babel preset react app](https://www.npmjs.com/package/babel-preset-react-app)