Top 7 must have Webpack plugins for your next React 2019 application
Some of the most recent articles have been about, “How to setup a Webpack dev server for React” or “How to optimize your CSS with this 1 rule in Webpack“.
But this begs to ask, what are the top Webpack plugins that an engineer should be using for their React project?
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.
The next couple of Webpack plugins that I will cover, they should be inside the minimizer property.
Terser webpack plugin
Another plus to this plugin is that it supports ES6+.
Here is a basic configuration for Terser.
Source: Terser 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.
Source: Optimize css assets plugin
HTML Webpack plugin
The HTML Webpack plugin is a handy plugin for both development and production build.
All you need to do is supply the HTML template to use.
But if you’d like to only use the minify property for build you can do something like.
Source: 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.
Source: Webpack DefinePlugin
Mini CSS Extract plugin
This plugin is another great production tool.
Some other features that are enjoyable versus the Extract Text Webpack plugin is:
- Async loading
- No duplicate compilation
- Easier to use
Now to configure babel-loader for .js, .jsx, and as well for Typescript (if you’re using it).
Source: 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.
Source: Babel preset react app
I like to tweet about Webpack and post helpful code snippets. Follow me there if you would like some too!