page-skeleton-webpack-plugin - Webpack plugin to generate the skeleton page automatically

•    Javascript

---

Page Skeleton is a webpack plugin.The purpose of the plugin is to generate the corresponding skeleton screen page according to different route pages in your project, and to pack the skeleton screen page into the corresponding static route page through webpack. All examples are in the examples folder.

webpack-plugin puppeteer page-skeleton webpack

preload-webpack-plugin - A webpack plugin for injecting <link rel='preload|prefecth'> into HtmlWebpackPlugin pages, with async chunk support

•    Javascript

---

A Webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript chunks using <link rel='preload'>. This helps with lazy-loading. Note: This is an extension plugin for html-webpack-plugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.

preload preload-plugin web performance perfetch webpack-plugin webpack plugin html-webpack-plugin script resource-hints

html-webpack-plugin - Simplifies creation of HTML files to serve your webpack bundles

•    Javascript

---

This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader. The html-webpack-plugin works without configuration. It's a great addition to the ⚙️ webpack-config-plugins.

html-webpack-plugin webpack plugin html

hard-source-webpack-plugin

•    Javascript

---

HardSourceWebpackPlugin is a plugin for webpack to provide an intermediate caching step for modules. In order to see results, you'll need to run webpack twice with this plugin: the first build will take the normal amount of time. The second build will be signficantly faster. Install with npm install --save hard-source-webpack-plugin or yarn. And include the plugin in your webpack's plugins configuration.

webpack webpack-plugin webpack-cache disk iterative build cache plugin

html-webpack-template - a better default template for html-webpack-plugin

•    HTML

---

This is a template for the webpack plugin html-webpack-plugin. It has a few extra features more than the default template which will hopefully make it less likely that you'll have to create your own index.html file in your webpack project. Templates for the html-webpack-plugin are implemented using underscore templates (previously, in 2.x, blueimp templates). You can write your own as well.

webpack template html-webpack-plugin index.html index.ejs

prerender-spa-plugin - Prerenders static HTML in a single-page application.

•    Javascript

---

Flexible, framework-agnostic static site generation for sites and SPAs built with webpack. 👉 This is the stable 3.x version of prerender-spa-plugin based on puppeteer. If you're looking for the (now-deprecated) 2.x version, based on PhantomJS, take a look at the v2 branch.

prerender seo spa webpack webpack-plugin static-site-generator ssr serverside-rendering

prerender-loader - 📰 Painless universal pre-rendering for Webpack.

•    Javascript

---

Painless universal prerendering for Webpack. Works great with html-webpack-plugin. Pre-rendering describes the process of rendering a client-side application at build time, producing useful static HTML that can be sent to the browser instead of an empty bootstrapping page.

webpack prerender pre-rendering pre-render prerendering webpack-plugin ssr performance first-contentful-paint fcp

duplicate-package-checker-webpack-plugin - 🕵️ Webpack plugin that warns you when a build contains multiple versions of the same package

•    Javascript

---

Webpack plugin that warns when your bundle contains multiple versions of the same package. It might be possible that a single package gets included multiple times in a Webpack bundle due to different package versions. This situation may happen without any warning, resulting in extra bloat in your bundle and may lead to hard-to-find bugs.

webpack-plugin webpack plugin

babel-plugin-webpack-loaders - babel 6 plugin which allows to use webpack loaders

•    Javascript

---

Since plugin was published, there were a lot of changes in testing software. Be sure in most(all) cases you DON'T need this plugin for testing. I highly recommend you to use jest for testing, and use moduleNameMapper (identity-obj-proxy, etc) to mock CSS-Modules and other webpack loaders. This Babel 6 plugin allows you to use webpack loaders in Babel. It's now easy to run universal apps on the server without additional build steps, to create libraries as usual with babel src --out-dir lib command, to run tests without mocking-prebuilding source code. It just replaces require - import statements with webpack loaders results. Take a look at this Babel build output diff to get the idea.

babel webpack loader css-modules css-loader

offline-plugin - Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)

•    Javascript

---

This plugin is intended to provide an offline experience for webpack projects. It uses ServiceWorker, and AppCache as a fallback under the hood. Simply include this plugin in your webpack.config, and the accompanying runtime in your client script, and your project will become offline ready by caching all (or some) of the webpack output assets.

service-worker appcache webpack serviceworker pwa offline progressive-web-app storage plugin webpack-plugin offline-first service-workers application-cache caching cache progressive-web-apps app-shell appshell

purifycss-webpack - Remove unused CSS with webpack

•    Javascript

---

PurifyCSS for Webpack. This plugin uses PurifyCSS to remove unused selectors from your CSS. You should use it with the extract-text-webpack-plugin.

webpack-plugin purifycss webpack uncss plugin purify

stylelint-webpack-plugin - A webpack plugin to lint your CSS/Sass code using stylelint

•    Javascript

---

This module requires a minimum of Node v6.9.0 and webpack v4.0.0. Both stylelint-loader and this module have their uses. stylelint-loader lints the files you require (or the ones you define as an entry in your webpack config). However, @imports in files are not followed, meaning only the main file for each require/entry is linted.

stylelint webpack lint linter node-sass plugin webpack-plugin

copy-webpack-plugin - Copy files and directories with webpack

•    Javascript

---

ℹ️ If you want webpack-dev-server to write files to the output directory during development, you can force it with the write-file-webpack-plugin.

webpack-plugin filesystem webpack plugin transfer move copy

friendly-errors-webpack-plugin - Recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them to provide a better Developer Experience

•    Javascript

---

Friendly-errors-webpack-plugin recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them to provide a better Developer Experience. Simply add FriendlyErrorsWebpackPlugin to the plugin section in your Webpack config.

friendly errors webpack plugin

dotenv-webpack - A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use

•    Javascript

---

A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use. Include the package locally in your repository.

webpack-plugin dotenv-webpack dotenv webpack plugin secure environment-variables env safe environment dotenv-safe variables process process.env

write-file-webpack-plugin - Forces webpack-dev-server to write bundle files to the file system.

•    Javascript

---

Forces webpack-dev-server program to write bundle files to the file system. This plugin has no effect when webpack program is used instead of webpack-dev-server.

webpack plugin webpack-dev-server write file

grunt-webpack - integrate webpack into grunt build process

•    Javascript

---

Use Webpack with Grunt. Install this grunt plugin next to your project's Gruntfile.js. You also need to install webpack yourself, this grunt plugin does not install webpack itself.

grunt webpack grunt-webpack plugin gruntplugin

sw-precache-webpack-plugin - Webpack plugin that generates a service worker using sw-precache that will cache webpack's bundles' emitted assets

•    Javascript

---

SWPrecacheWebpackPlugin is a webpack plugin for using service workers to cache your external project dependencies. It will generate a service worker file using sw-precache and add it to your build directory. A simple configuration example that will work well in most production environments. Based on the configuration used in create-react-app.

sw-precache service-workers webpack-plugin sw-guide progressive-web-app offline webpack plugin precache service worker

static-site-generator-webpack-plugin - Minimal, unopinionated static site generator powered by webpack

•    Javascript

---

Minimal, unopinionated static site generator powered by webpack. Bring the world of server rendering to your static build process. Either provide an array of paths to be rendered, or crawl your site automatically, and a matching set of index.html files will be rendered in your output directory by executing your own custom, webpack-compiled render function.

assets-webpack-plugin - Webpack plugin that emits a json file with assets paths

•    Javascript

---

Webpack plugin that emits a json file with assets paths. When working with Webpack you might want to generate your bundles with a generated hash in them (for cache busting).

webpack plugin generate assets hashes