Some cool webpack tools you can use in the project

Introduce

The keyword webpack is no longer unfamiliar to everyone, its power is clearly shown through the number of running projects or the number of stars (currently 56.8k votes on github, it’s just core. its only). When it comes to webpack, there will be 2 major components that make it powerful: its loader and pluin , today I would like to introduce some plugin that are new and feel interesting, are looking to try to apply in the project .

Some plugins:

1> moment-locales-webpack-plugin:

Homepage : https://github.com/iamakulov/moment-locales-webpack-plugin

• Introduction : When we use momentjs for time-related formatting, we usually have to import some localization only. However, when using momentjs, we often get bundled with many different languages ​​=> this creates redundancy and causes heavy application on the application. This plugin was created to reduce some unnecessary localization
• Install :

npm install --save-dev moment-locales-webpack-plugin

• Use :

As in the code above the usage is very simple: you import the plugin and use the localesToKeep property to keep the languages ​​you need. Note: English is the default language, so it cannot be removed

• Results :

You can remove moment’s unnecessary languages ​​(about 75% of the file size of moment is due to support for different languages) Although momentjs is being replaced by other libraries (DateFns, DateJs, Luxon) , ..) but if your project is using momnent then you can try using this

2> webpack-pwa-manifest:

Homepage : https://github.com/arthurbergmz/webpack-pwa-manifest

• Introduction : When we are using the dynamically generated manifest.json file (used in Progressive Web Application)
• Install :

npm install --save-dev webpack-pwa-manifest

• Use :

• Result We generate a manifest.json file that is automatically generated and injected, with support for icon resizing and fingerprinting.

3> filemanager-webpack-plugin:

** Homepage **: https://github.com/gregnb/filemanager-webpack-plugin Introduction Its name says it all, it is a file manager plugin that allows you to copy, compress (zip, tar, tar.gz), move or delete files and folders before or after the build (I recommend for you to try a plugin that synthesizes what you need, if you need a similar function you can use copy-webpack-plugin or remove-files-webpack-plugin , …)

• Install :

• Use :

4> webpack-build-notifier:

Homepage : https://github.com/roccoc/webpack-build-notifier

• Introduction : Every time you build with webpack, you want when you succeed or fail, there will be a small notice for you to observe and correct mistakes if there is an error, this is the plugin you need.

(image without plugin configured)

• Install :

• Use :

Additionally, you can further configure the display time with showDuration , or successIcon warningIconfailureIcon compileIcon successIcon warningIconfailureIcon compileIcon , sounds, or other events.

• Result: Build success or failure with gentle notification and sound
• 

It is contraindicated to use the plugin for anyone who does not like to read [email protected] @

5> Some other plugins you can try to find out:

• prerender-spa-plugin: https://github.com/chrisvfritz/prerender-spa-plugin
• serverless-webpack: https://github.com/serverless-heaven/serverless-webpack
• Friendly-errors-webpack-plugin: https://github.com/geowarin/friendly-errors-webpack-plugin
• dynamic-cdn-webpack-plugin: https://github.com/mastilver/dynamic-cdn-webpack-plugin

Conclude:

Through my introduction, hope you can be more interested in webpack and apply a certain one I have introduced.

Thank you for reading through my article.

Reference: https://webpack.js.org/