Top Webpack plugins for faster development
How many times have you refreshed your browser after changing your source code? How many times have you typed localhost:PORT after opening your browser? How many times have you forgotten which PORT your current server is running on because you have a lot of servers running on various ports? If you have faced these and many more developmental challenges, it’s because
If we have the right tools available, development becomes a breeze. In this article, I am going to list a few webpack plugins that I use daily in my projects to simplify the build process and make my life a tad bit easier.
If you want to know about webpack and how to set it up in a React Project, you can read Yet another Beginner’s Guide to setting up a React Project. It’s a two-part series that explains the need for JSX, Babel and Webpack. The plugins mentioned here will extend the scope of the previous article while still being useful in isolation.
Let’s begin.
Webpack Dashboard
Generally, when you use webpack, it gives its build process output in this manner —
We can’t figure out a lot of things from this textual barrage. Also, the information is scattered and not presented in a coherent and logical manner. Webpack Dashboard aims to change that. Install it using yarn by typing yarn add -D webpack-dashboard.
Now, add this plugin in your webpack.config.js.
To add the plugin, we first import the plugin using require. See line 2. Then we add it to the plugins array as we did in line 19–21. To add more plugins, just keep appending to the plugins array.
Now, change the start scripts. If you were using webpack-dev-server, change the start script from
"scripts": {
"start": "webpack-dev-server index.js"
},to
"scripts": {
"start": "webpack-dashboard -- webpack-dev-server index.js"
}You can read more about the -- here. Also, more setup instructions are provided here.
Now, if you run yarn start you are going to be greeted by this beautiful dashboard and suddenly you are super cool developer. :) —
Open Browser Webpack Plugin
This plugin is for the most efficient ones. After webpack is done bundling, it will automatically open the preferred browser (or a new tab) with the provided url. Install it using yarn yarn add -D open-browser-webpack-plugin. Then, add to the plugins key of webpack.config.js this line —
new OpenBrowserPlugin({ url: 'http://localhost:8080' })If you don’t want to install another plugin for this small task, you are in luck. Webpack-dev-server also provides an --open CLI flag that does the same thing. You can read about it here.
Webpack Bundle Analyzer
Have you ever thought how much space bundle.js was taking? And what is the size of individual module? Or How many total modules are used in bundling? Webpack maintains stats about these things. You can get it by running webpack —-json > stats.json. However, unless you can read thousands of lines of JSON, you need something visual. Bundle analyser does exactly that. You can see interactive zoomable map of your bundle.
Install it using yarn yarn add -D webpack-bundle-analyzer. Then, add to the plugins key of webpack.config.js this line —
new BundleAnalyzerPlugin()
Also check this out. Same concept, different visualisation.
Friendly Errors
If an error occurs in the build process of webpack, you will get a cryptic error messages. This plugin aims to resolve that. It recognises certain classes of webpack errors and cleans, aggregates and prioritises them to provide a better developer experience.
You can install it by yarn add -D friendly-errors-webpack-plugin and adding it to the webpack.config.js. Remember to set the quiet flag of webpack to true. Otherwise, you’ll get webpack’s output too.
Duplicate Package Checker
This plugin warns when your bundle contains multiple versions of the same package. There is a possibility that some modules may depend on same package but different versions. If it happens, a warning will be shown. It will help you in removing unnecessary modules that may bloat your bundle.
Install it by running yarn add -D duplicate-package-checker-webpack-plugin.
It is interesting to note that yarn also allows installation of packages with only one version. It is called flat installation.
Ignore Plugin
Like its says, this plugin ignores modules generation that match against a given regular expression. If you are using momemt.js, the locale files i.e files that store information about various timezones, are stored in the core library. With ignore plugin, you can ignore some locales that your app does not support. You can read more about it in this GitHub issue.
Hot Module Replacement(HMR)
Hot Module Replacement allows modules to be replaced in a bundle without reloading the webpage. The replacement is dynamic and is done while the application is running. It makes it possible to see changes rendered on the page almost instantly. This can significantly speed up development in a few ways:
- The application state is saved as full page reload is not done
- Development time is reduced as only the changed part is updated as opposed to the whole application
- This also means that you can write CSS in your editor and the see the changes instantly.
HMR is already included in webpack. In webpack-dev-server, the --hot CLI flag is used to switch it on.
What tools do you use to simplify your development process? Mention them in the responses.
We are always looking for talented, curious people to join the team.
I write about JavaScript, web development, and Computer Science. Follow me for weekly articles.
Originally published at codeburst.io on February 16, 2018 by Arfat Salman
