I assume you’ve already known what is Webpack, why it’s awesome and how it works, so let’s start:

Probably, you aware of such commonly used tools for Webpack like: style-loader, html-webpack-plugin, extract-text-webpack-plugin, file-loader and other popular stuff.

1. Offline-plugin

Offline plugin (ServiceWorker, AppCache) for webpack

From official description:

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.

2. Preload-webpack-plugin

A Webpack plugin for wiring up `<link rel=’preload’>` (and prefetch) — supports async chunks

From official description:

A Webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript chunks using <link rel='preload'> . This helps with lazy-loading.

3. Webpack-manifest-loader

Webpack plugin for generating asset manifests

Automatically generates manifest.json for your app.

4. PurifyCSS-webpack

Remove unused CSS with webpack

Probably, you don’t want to include unused CSS in your production build, and that’s where Purify-CSS comes. This webpack loader aims to remove unused css selectors.

Note: You should use it with the extract-text-webpack-plugin.

5. Copy-webpack-plugin

This is a webpack plugin that copies individual files or entire directories to the build directory.

Simple plugin, that allows you to copy files/directories.

Common use-case is to copy your static files (media, images) into dist folder:

new CopyWebpackPlugin([

{

from: _.cwd('./static'),

// to the root of the dist path

to: './'

}

])

6. Isomorphic-style-loader

CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.

From official docs:

An alternative CSS style loader, which works similarly to style-loader, but is optimized for isomorphic apps. In addition to what style-loader provides, it allow to render critical path CSS during server-side rendering (SSR), by adding two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns CSS string).

7. Eslint-loader

eslint loader (for webpack)