The WebPack plug-in is used to perform a wider range of tasks, such as package optimization, asset management, and environment variable injection.

Webpack itself is built on the same plug-in system as the WebPack configuration. Depending on how you use Webpack, there are several ways to use plug-ins.

Without further ado, here are six great WebPack plug-ins.

Webpack Bundle Analyzer

Visualize the size of the Webpack output file through an interactive, scalable tree.

The plugin will help you do the following:

  1. Know what’s really in your bag
  2. Find out which modules make up the largest part of the bundled software
  3. Look for modules that arrived in error
  4. Optimize your Webpack bundle

The installation

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
Copy the code

use

const BundleAnalyzerPlugin = require('webpack-bundle analyzer');
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}
Copy the code

offline-plugin

Offline-plugin is designed to provide an offline experience for Webpack projects.

The plug-in uses ServiceWorker and AppCache as the background engine. Simply include this plug-in in webpack.config and include the accompanying runtime in the client script, and your project will go offline by caching all (or some) of the WebPack output assets.

The installation

npm install offline-plugin [--save-dev]
Copy the code

use

First, instantiate the plug-in in your webpack.config:

// webpack.config.js example
var OfflinePlugin = require('offline-plugin');
module.exports = {
  // ...
  plugins: [
    // ... other plugins
    // It would have been better if the OfflinePlugin had been added last
    new OfflinePlugin()
  ]
  // ...
}
Copy the code

Also, you can choose to configure using options. Then, add the runtime to the Entry file (usually entry) :

require('offline-plugin/runtime').install();
Copy the code

ES6/Babel/TypeScript

import * as OfflinePluginRuntime from 'offline-plugin/runtime';
OfflinePluginRuntime.install();
Copy the code

For more details on TypeScript usage, see here.

webpack-pwa-manifest

Webpack-pwa-manifest describes itself as “a progressive Web App manifest generator for Webpack, with automatic icon resizing and fingerprint recognition support.”

Webpack-pwa-manifest is a Webpack plug-in that generates manifest.json for your progressive Web application.

If you use injection for configuration, make sure the HtmlWebpackPlugin appears before the WebpackPwaManifest in the plugins array.

Characteristics of the

  • Automatic icon resizing
  • Icon fingerprint
  • Listing the fingerprint
  • Automatic list injection on HTML
  • Hot overload support

The installation

npm install --save-dev webpack-pwa-manifest
Copy the code

use

In your webpack.config.js:

import WebpackPwaManifest from 'webpack-pwa-manifest'. plugins: [new WebpackPwaManifest({
    name: 'My Progressive Web App'.short_name: 'MyPWA'.description: 'My awesome Progressive Web App! '.background_color: '#ffffff'.crossorigin: 'use-credentials'.// The value can be null, use-credentials, or anonymous
    icons: [
      {
        src: path.resolve('src/assets/icon.png'),
        sizes: [96.128.192.256.384.512] // Multiple sizes
      },
      {
        src: path.resolve('src/assets/large-icon.png'),
        size: '1024x1024' // You can also use specification mode}}]]Copy the code

imagemin-webpack-plugin

Imagemin-webpack-plugin is a WebPack plug-in for compressing images using Imagemin.

The installation

npm install imagemin-webpack-plugin
Copy the code

use

import ImageminPlugin from 'imagemin-webpack-plugin'
module.exports = {
  plugins: [
    // Make sure the plug-in comes after the plug-in that added the image
    new ImageminPlugin({
      disable: process.env.NODE_ENV ! = ='production'.// Disable it during development
      pngquant: {
        quality: '95-100'}}})]Copy the code

prerender-spa-plugin

Prerender-spa-plugin prerenders static HTML into a single-page application.

The purpose of this plug-in is to provide a simple pre-render solution that can be easily extended and adapted to any web site or single-page application built using WebPack.

What is pre-rendering?

Recently, server-side rendering (SSR) has taken the JavaScript front-end world by storm. A matter of fact, you are now to render your web site on the server and application, and then send to your clients, this is a revolutionary idea (before popular JS client application, everyone is doing, it is not entirely in JS client application pop up before).

However, the same criticisms that were made of PHP, ASP, JSP (and so on) sites are now true for server-side rendering. It’s slow, fairly crash prone, and difficult to implement correctly.

The thing is, no matter what anyone says, you probably don’t need SSR. You can get almost all of its advantages (and none of its disadvantages) by using pre-dispatch. Prerendering is basically launching a headless browser, loading the route to the application, and saving the results to a static HTML file. You can then use it with any static file service solution you’ve used before. It only works with HTML5 navigation and so on. No code changes or server-side rendering solutions needed to be added.

The installation

yarn add -D prerender-spa-plugin
Copy the code

The basic use

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // Required -- points to the prerender path for the WebPack output application.
      staticDir: path.join(__dirname, 'dist'),
      // Routes to render.
      routes: [ '/'.'/about'.'/some/deep/nested/route'],})]}Copy the code

duplicate-package-checker-webpack-plugin

This is a Webpack plug-in that warns when your bundle contains multiple versions of the same package.

Why is that?

A single package may be included multiple times in the WebPack bundle due to different package versions. This can happen without warning, resulting in additional bloat in bundled software and potentially hard-to-find errors.

The plug-in will warn you in this case to minimize the size of the bundle and avoid errors due to accidental repackaging.

The installation

npm install duplicate-package-checker-webpack-plugin --save-dev
Copy the code

use

Add plug-ins to your WebPack configuration:

const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");
module.exports = {
  plugins: [new DuplicatePackageCheckerPlugin()]
};
Copy the code

The article was first published in the public number “front-end foreign language selection”, private reply: gift package, send a network of high-quality video courses network disk information, can save a lot of money for you!